Chart.js - 如何为随时间发生的大量数据创建自动缩放折线图

Posted 2023-04-18

【中文标题】Chart.js - 如何为随时间发生的大量数据创建自动缩放折线图

【英文标题】：Chart.js - How to create an auto-scaling line diagram for a big amount of data happenning over time

【发布时间】：2018-02-19 21:19:46

【问题描述】：

所以我有相对大量的数据要使用chart.js 显示在折线图上。

问题

我的数据集如下所示：

 [label: 'Mon Feb 19 2018 21:02:38 GMT+0000 (GMT)', value: 0.2 ,
  label: 'Mon Feb 19 2018 21:02:39 GMT+0000 (GMT)', value: 0.1 ,
  label: 'Mon Feb 19 2018 21:02:40 GMT+0000 (GMT)', value: 0.5 ,
  label: 'Mon Feb 19 2018 21:02:41 GMT+0000 (GMT)', value: -0.3 ,
  label: 'Mon Feb 19 2018 21:02:52 GMT+0000 (GMT)', value: -0.3 ]

我可以根据这些数据创建一个图表，其中包含 XAxis 上的 5 个标签和 YAxis 上的 5 个记录。轻松愉快。

所以我的记录一个接一个地在几秒钟内发生，这很容易放在图表上。但是，我会随着时间的推移累积数据，所以我的第一次可以是：

label: 'Mon Feb 19 2018 21:02:38 GMT+0000 (GMT)', value: 0.2 , ...
label: 'Mon Feb 26 2018 11:02:38 GMT+0000 (GMT)', value: 0.2 ]

因此，现在图表上的数据应该是auto-scaled，正确显示了从第一个日期到最后一个日期的线，中间有一些标签。

我想出的唯一方法是专注于序列化我的数据，但这是一种非常困难且乏味的方法。 如果可以在图书馆内处理，我不想重新发明***。 从我目前看到的情况来看，这是一个非常强大的库，如果使用得当，我认为这样的事情是可以处理的。

如果有使用此库经验的人可以帮助我为此任务编写代码，或者指出正确的方向，我将不胜感激。

【参考方案1】：

This 可能是您需要的。您基本上只需要将新点推送到现有标签和值数组并调用图表的更新方法。