Chart.js 实时数据图表：固定显示数量与历史数据保留策略

本文详解如何在 chart.js 中实现「仅显示最近 n 个数据点」的滚动视图效果，同时完整保留全部历史数据以支持缩放查看，避免 `shift()` 导致的数据丢失问题。

在构建实时数据记录器（如传感器监控、日志可视化）时，一个常见需求是：图表始终只显示最新 20 个数据点（保持视觉简洁），但所有历史数据必须保留在内存中，以便用户通过缩放插件回溯更长时间范围。你当前的 shift() 方案虽能限制显示数量，却会永久删除旧数据——这与“可缩放查看全部历史”的目标相悖。

关键在于区分两个概念：
✅ 数据存储（Storage）：应无损累积所有采集值；
✅ 视图窗口（View Window）：仅动态计算并渲染最近 N 个点的坐标与标签。

✅ 正确实现思路：双缓冲 + 动态标签映射

不删除任何数据，而是通过 scales.x.ticks.callback 和 scales.x.min/max 控制可见范围，并用 labels 数组动态生成“逻辑时间轴”：

// 在 options 中配置 X 轴为 category 类型（更易控制）
scales: {
  x: {
    type: 'category', // 替代 linear，避免数值标签错位
    ticks: {
      callback: function(value, index, ticks) {
        // 仅显示当前窗口内标签（可选：隐藏所有标签提升性能）
        const visibleStart = Math.max(0, data.datasets[0].data.length - 20);
        return index >= visibleStart ? value : '';
      }
    }
  },
  y: { beginAtZero: true }
}

但更推荐且健壮

的方式是：保留完整数据，仅更新 chart.data.labels 和 chart.data.datasets[0].data 的“视图切片” —— 这正是你原始代码缺失的关键：labels 必须与 data 同步重映射，而非依赖递增索引。

以下是优化后的 addDataPoint() 实现（兼容 Chart.js v4+）：

let allLabels = [];   // 全量标签（如时间戳或序号）
let allData = [];     // 全量数据值
const WINDOW_SIZE = 20;

function addDataPoint() {
  const now = Date.now(); // 推荐用真实时间戳，便于缩放语义化
  const value = Math.random() * 100;

  allLabels.push(now);
  allData.push(value);

  // ✅ 构建当前窗口视图：取最后 WINDOW_SIZE 个点
  const startIndex = Math.max(0, allData.length - WINDOW_SIZE);
  chart.data.labels = allLabels.slice(startIndex);
  chart.data.datasets[0].data = allData.slice(startIndex);

  // ⚠️ 强制刷新 X 轴范围（确保缩放插件能识别全量数据）
  chart.options.scales.x.min = allLabels[0]; // 全局最小时间
  chart.options.scales.x.max = allLabels[allLabels.length - 1];

  chart.update('active'); // 使用 active 模式提升动画性能
}

setInterval(addDataPoint, 250);

? 为什么你的 shift() 会“覆盖”旧值？

当你调用 labels.shift() 和 data.shift()，数组长度减少，后续 push() 的新值会填入原位置，但 x 标签仍按 length 递增（如 [0,1,2,...,19] → [1,2,...,20]），导致视觉上“所有点右移”，实则坐标错乱。而使用 slice() 切片，标签与数据严格一一对应，且全量数组 allLabels/allData 始终存在，缩放时插件可直接访问完整时间范围。

? 注意事项与增强建议

• 时间戳优于序号：用 Date.now() 作为 label，缩放后 X 轴自动显示合理时间间隔（秒/分），比纯数字索引更具业务意义；
• 性能优化：若数据量极大（>10万点），考虑定期归档到 IndexedDB，内存中仅保留近期数据；
• 插件兼容性：chartjs-plugin-zoom 默认支持全量数据缩放，前提是 scales.x.min/max 设置为全局范围（如上所示）；
• 初始空状态处理：首次渲染前确保 chart.data.labels 和 data 非空，可预填充 20 个 null 占位；
• 响应式重绘：调用 chart.update('active') 而非 chart.update()，避免全量重绘开销。

通过此方案，你既获得了清爽的“滚动窗口”体验，又保留了完整的数据溯源能力——这才是专业数据记录器应有的设计。