Chartjs 2缩放了大量数据点

Question

我正在尝试使用24小时数据（每30秒收集一次）渲染折线图。我无法从docs中弄清楚如何很好地扩展它。

文档说：

  

在构建其刻度时，它将根据刻度尺寸自动计算最舒适的单位。

但我不能让我的折线图“舒适地”缩放。我不确定它们是什么意思，但我得到了太多的数据点来呈现得很好。所以我想我正在寻找一种方法来丢弃数据点（使用chartjs，而不是手动滚动）。

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

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

任何指针在哪里看？

Answer 1

如果您仍然对“删除数据点”感兴趣，可以查看最近再次激活的github问题。见链接

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'，然后了解如何使其适用于您。