如何使用Chart.js实现实时数据图表达到最大可见点数后的自动平移功能

Chart.js实时时间戳图表固定可见点数方案 #

这里提供两种实现路径，可根据是否需要保留全量历史数据选择：

方案1：裁剪数据集（性能最优，无需依赖pan插件能力） #

如果不需要保留超过20个的历史数据，直接操作数据源即可，无需调用pan方法：

// 每次新数据点加入后执行
flukeChart.data.datasets[0].data.push(newDataPoint);
if (flukeChart.data.datasets[0].data.length > 20) {
  // 移除最早的1个数据点，数据集永远保持最多20个点
  flukeChart.data.datasets[0].data.shift();
}
flukeChart.update();

这种方式不会累积冗余数据，Chart.js的渲染压力不会随运行时间升高。

方案2：使用pan方法平移（保留全量历史数据，支持缩放回看） #

你提到的delta值设置问题确实存在，pan方法的x轴delta数值和X轴刻度单位完全对应，X轴为时间戳时，delta需要传入对应时长的毫秒值：

const dataset = flukeChart.data.datasets[0].data;
// 每次新增数据后判断
if (dataset.length > 20) {
  // 取相邻两个数据点的时间差作为平移量，间隔均匀的话取最新两个或最早两个结果一致
  const timeDelta = dataset[dataset.length - 1].x - dataset[dataset.length - 2].x;
  flukeChart.pan({x: timeDelta, y: 0}, 'active');
  flukeChart.update();
}

如果数据点间隔不固定，可以用最早两个数据点的时间差作为平移量，保证刚好把最旧的点移出视野：

const timeDelta = dataset[1].x - dataset[0].x;

提示：你可以直接通过数据集的长度判断是否需要平移/裁剪，不需要额外维护ticks计数变量，避免计数和实际数据量不一致的问题。

内容的提问来源于stack exchange，提问作者Paul Côté