Chartjs 2扩展大量数据点 [英] Chartjs 2 scaling lots of data points

问题描述

我正在尝试绘制一个折线图，其中包含24小时的数据(每30秒收集一次).我无法从文档中弄清楚如何将其获取很好地扩展.

I'm trying to render a line chart with 24 hours of data (collected every 30 seconds). I can't figure out from the docs how to get it to scale nicely.

文档说:

建立刻度时，它将根据秤的大小自动计算最舒适的单位.

When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.

但是我无法使折线图舒适地"缩放.我不确定这是什么意思，但是我得到了太多的数据点，无法很好地渲染.因此，我想我正在寻找一种删除数据点的方法(使用chartjs，而不是手动滚动).

But I can't get my line chart to scale "comfortably". I'm not sure it's what they mean, but I get far too many data points to render nicely. So I guess I'm looking for a way to drop data points (using chartjs, not hand rolled).

我正在使用我的选项进行类似的操作；

I'm doing something like this with my options;

const options = {
  spanGaps: false,
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        displayFormats: {
          quarter: 'HH:mm'
        }
      }
    }]
  }
};

任何指针在哪里看?

推荐答案

如果您仍然对删除数据点"感兴趣，可以看看github问题，该问题最近再次活跃.查看链接

In the case that you are still interested in 'dropping data points', you can have a look at the github issue which is recently active again. See link

https://github.com/chartjs/chartjs-plugin-zoom/issues/75 .

您可以找到今年早些时候用js编写的插件，用于过滤数据集，使其仅包含可见的数据集；可以使用您自己的过滤规则进行自定义.我个人在后端过滤数据集，然后再将其发送到javascript....

There you can find a plugin written earlier this year in js for filtering datasets to include only those which are visible; it can be customized with your own filtering rule. I personally filter the dataset on my backend prior to sending it to javascript though....

否则，如果您想以可缩放"的方式呈现更多时间序列数据，为什么不使用Chartjs时间序列/财务折线图呢?您可以在这里的官方文档中查看...

Else, if you want to render even more time series data in a 'scalable' way, why not use the Chartjs time series/financial line plot ? You can check it out at the official documentation here ...

http://www.chartjs.org/samples/latest/scales/time/financial.html ...这是折线图的一种变体；查看源代码. 请注意，如果您不介意没有交互式工具提示，请按原样使用(源示例).

http://www.chartjs.org/samples/latest/scales/time/financial.html ... Which is a variant of the line chart ; check out the source code. Caveat is, use it as is (the source example) if you don't mind not having interactive tooltips.

除了xnakos的注释外，对于更大的数据集，关于性能的最终想法(有点超出我的脑海..)使您可以尝试设置更小的pointRadius(非零)和而不是渲染线条.我发现此技巧对于在屏幕上分配点也很有用.在数据集中，只需设置showLine = 'false'并查看如何使其适用于您.

Nonetheless in addition to xnakos's comment , a final thought (a bit of extra that crossed my mind..) on performance renders for even larger data sets, you may experiment with the combination of setting smaller pointRadius (non zero), and not rendering the lines instead. I have found this trick useful as well for allot of points on screen. In your datasets, just set showLine = 'false' and see how to make it work for you.

这篇关于Chartjs 2扩展大量数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！