Chartjs 2 缩放大量数据点 [英] Chartjs 2 scaling lots of data points

问题描述

我正在尝试使用 24 小时数据(每 30 秒收集一次)呈现折线图.我无法从

我正在用我的选择做这样的事情；

常量选项 = {跨度间隙:假，秤:{x轴:[{类型:'时间'，时间: {显示格式:{四分之一:'HH:mm'}}}]}};

任何指针在哪里看?

解决方案

如果你还对丢弃数据点"感兴趣，可以看看最近又活跃的github issue.见链接

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

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

否则，如果您想以可扩展"的方式呈现更多时间序列数据，为什么不使用 Chartjs 时间序列/财务线图?您可以在此处查看官方文档...

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

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

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.

The docs say:

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

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'
        }
      }
    }]
  }
};

Any pointers where to look?

解决方案

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.

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....

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 ... 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.

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屋！