Chart.js 实时数据窗口控制：固定显示数量 + 历史数据保留-html教程-PHP中文网

Chart.js 实时数据窗口控制：固定显示数量 + 历史数据保留

本文详解如何在 chart.js 中实现「仅显示最近 n 个数据点」的滚动视图效果，同时完整保留历史数据以支持缩放回溯——兼顾实时性与可追溯性。

本文详解如何在 chart.js 中实现「仅显示最近 n 个数据点」的滚动视图效果，同时完整保留历史数据以支持缩放回溯——兼顾实时性与可追溯性。

在构建数据日志可视化系统（如传感器监控、实时仪表盘）时，一个常见需求是：图表始终只显示最新 20 个数据点（形成“滑动窗口”），但底层数据集需完整保存所有历史值，以便用户通过缩放插件查看更长时间范围的数据。直接使用 shift() 删除旧数据虽能限制显示数量，却会永久丢失历史记录，违背可追溯性原则。

核心思路在于：分离「数据存储」与「可视范围」。Chart.js 的 x 轴标签（labels）本质上是用于定位的坐标值，而非必须连续的索引。我们应让 labels 表达真实的横轴时间/序号语义，而非简单用 push(i) 生成递增整数。

✅ 正确做法：动态维护逻辑坐标，而非删除数据

关键修改点如下：

引入全局计数器 pos：代表当前窗口左边界对应的逻辑 x 坐标（即最早可见点的 x 值）；
始终追加新数据：labels.push(pos + window_size - 1)，data.push(y)，确保历史不丢失；
仅更新可视窗口内的标签值：当数据量 ≥ 窗口大小时，重写 labels 数组前 window_size 项为 [pos, pos+1, ..., pos+window_size-1]；
每次新增后递增 pos：保证窗口平滑右移。

以下是优化后的 addDataPoint() 函数（适配 Chart.js v4.x + zoom 插件）：

let pos = 0; // 当前窗口起始x坐标（逻辑位置）
const WINDOW_SIZE = 20;

function addDataPoint() {
  const y = Math.random() * 100;

  // 1. 永远追加：保留全部历史
  chart.data.labels.push(pos + WINDOW_SIZE - 1);
  chart.data.datasets[0].data.push(y);

  // 2. 若超出窗口容量，仅更新 labels 的可视部分（不删数据！）
  if (chart.data.labels.length >= WINDOW_SIZE) {
    const labels = chart.data.labels;
    const data = chart.data.datasets[0].data;

    // 重置前 WINDOW_SIZE 个标签为当前窗口的连续坐标
    for (let i = 0; i <h3>⚠️ 注意事项与最佳实践</h3>