chartjs -仅连接间隔小于1分钟的点

avkwfej4  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(176)

我有一个图表,其中的值以可变的间隔到达。通常我每秒都有数据点,但在暂停期间,我可能在20分钟内根本得不到任何点。或者整个周末。.以下是我当前图表的屏幕截图:

我想做的是,如果两个点之间的距离超过1分钟,就删除它们之间的连线。我可以通过插入“null”值来实现,但是考虑到数据每秒到达,我将不得不在多个周末添加许多null值。.
有没有一种自动化的方法来得到这个结果?我一直在广泛地寻找,但没有找到适当的解决办法。SpanGaps不会影响我的数据,因为中间没有空值。我需要的是与SpanGaps相反的东西。有点像“createGaps”,其接受整数作为差距的最大间隔。
这是我当前的flask模板代码,用于绿色线:

var myChart = new Chart(ChartDateTime, {
    type: 'line',
    data: {
        labels: [{% for day in days %}'{{ day }}',{% endfor %}],
        datasets: [{
            label: 'Recognized',
            data: [{% for okCrate in recognized %}{{ okCrate }},{% endfor %}],
            backgroundColor: 'transparent',
            borderColor: '#abef14',
            borderWidth: 1,
            radius:2,
            lineTension: 0.1,
            spanGaps: false,
            pointBackgroundColor: '#abef14',
            yAxisID: 'y'
        },
        
       ...
       ...

任何帮助感激不尽。
编辑---------
尝试按照@Josh kelly的建议执行段检查,但看起来像P0。x是一个浮点数,我无法计算出日期。.

function checkdist (ctx) {
            const value = ctx.p0.x;
            const nextvalue = ctx.p1.x;
            const diffInMs = new Date(nextvalue).getTime() - new Date(value).getTime();
            const diffInMinutes = Math.floor(diffInMs / 1000 / 60); // convert to minutes
            if (diffInMinutes > 1) {
                console.log(diffInMinutes);
                return 'rgb(0,0,0,0.2';
            }
            else
            {
                return;
            }
    }

我的代码段:

segment:{                          
                    borderColor: ctx => checkdist(ctx),                                         
              
            },
            spanGaps: true,
hpcdzsge

hpcdzsge1#

我通常通过在应该有间隙的地方插入null值来处理这个问题(正如您提到的)。但是,它看起来像段选项(图表之一。js的脚本选项)应该可以做你想要的事情。here就是一个例子。

相关问题