7

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

文档说：

在构建它的刻度时，它会根据刻度的大小自动计算最舒适的单位。

但我无法让我的折线图“舒适地”缩放。我不确定它们是什么意思，但我得到的数据点太多，无法很好地渲染。所以我想我正在寻找一种删除数据点的方法（使用 chartjs，而不是手卷）。

在此处输入图像描述

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

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

任何指针在哪里看？

4

1 回答 1

4

如果您仍然对“删除数据点”感兴趣，可以查看最近再次活跃的 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'并查看如何使其适合您。

于 2018-04-04T00:09:01.317 回答