Chartjs 2 缩放大量数据点

Question

我正在尝试呈现包含 24 小时数据（每 30 秒收集一次）的折线图。我无法从 docs 中弄清楚如何让它很好地扩展。

文档说：

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

但我无法按比例缩放折线图 "comfortably"。我不确定这是什么意思，但我得到的数据点太多而无法很好地呈现。所以我想我正在寻找一种删除数据点的方法（使用 chartjs，而不是手动滚动）。

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

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

有什么地方可以看吗？

Answer 1

如果你对'dropping data points'还有兴趣，可以看看最近又活跃的github问题。参见 link

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

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

否则，如果您想以 'scalable' 方式呈现更多时间序列数据，为什么不使用 Chartjs 时间 series/financial 线图？您可以在此处查看官方文档...

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

尽管如此，除了 xnakos 的评论之外，关于更大数据集的性能渲染的最后一个想法（我想到了一些额外的东西......），您可以尝试设置更小的 pointRadius（非零）的组合，而不是渲染线条。我发现这个技巧对于在屏幕上分配点也很有用。在您的数据集中，只需设置 showLine = 'false' 并查看如何让它为您工作。

Chartjs 2 缩放大量数据点

Chartjs 2 scaling lots of data points

chart.js

react-chartjs