chart.js – Chartjs 2缩放大量数据点

2019年7月28日 474次阅读

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

文档说：

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

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

《chart.js – Chartjs 2缩放大量数据点》

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

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

任何指针在哪里看？

最佳答案 如果您仍然对“删除数据点”感兴趣,可以查看最近再次激活的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’并查看如何使其适用于您.

点赞