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

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

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

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

  1. var myChart = new Chart(ChartDateTime, {
  2. type: 'line',
  3. data: {
  4. labels: [{% for day in days %}'{{ day }}',{% endfor %}],
  5. datasets: [{
  6. label: 'Recognized',
  7. data: [{% for okCrate in recognized %}{{ okCrate }},{% endfor %}],
  8. backgroundColor: 'transparent',
  9. borderColor: '#abef14',
  10. borderWidth: 1,
  11. radius:2,
  12. lineTension: 0.1,
  13. spanGaps: false,
  14. pointBackgroundColor: '#abef14',
  15. yAxisID: 'y'
  16. },
  17. ...
  18. ...

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

  1. function checkdist (ctx) {
  2. const value = ctx.p0.x;
  3. const nextvalue = ctx.p1.x;
  4. const diffInMs = new Date(nextvalue).getTime() - new Date(value).getTime();
  5. const diffInMinutes = Math.floor(diffInMs / 1000 / 60); // convert to minutes
  6. if (diffInMinutes > 1) {
  7. console.log(diffInMinutes);
  8. return 'rgb(0,0,0,0.2';
  9. }
  10. else
  11. {
  12. return;
  13. }
  14. }

我的代码段:

  1. segment:{
  2. borderColor: ctx => checkdist(ctx),
  3. },
  4. spanGaps: true,
hpcdzsge

hpcdzsge1#

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

相关问题