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

本文详解如何在 Chart.js 中实现「仅显示最近 N 个数据点」的滚动视图效果，同时完整保留所有历史数据以支持缩放回溯，避免 shift() 删除导致的历史丢失问题。

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

在构建实时数据记录器（如传感器监控、日志可视化）时，一个常见需求是：图表始终只显示最新 20 个数据点（形成“滑动窗口”），但底层数据需完整保存，以便用户通过缩放插件查看全部历史。直接使用 Array.shift() 删除旧数据虽能限制显示数量，却会永久丢失历史——这与可缩放设计目标相悖。

关键在于区分两个概念：
✅ 数据存储层：应无条件追加所有采集值（push 全量保存）；
✅ 显示层：仅动态计算当前窗口内应渲染的标签与数据子集，不修改原始数组。

✅ 正确实现方案：基于 scales.x.ticks.callback 的动态标签映射

Chart.js v4+ 支持通过 ticks.callback 自定义 X 轴刻度标签，结合 min/max 控制可见范围，即可实现「显示受限、数据全存」。以下是优化后的核心逻辑：

// main.js - 关键修改部分
const WINDOW_SIZE = 20;
let allLabels = []; // 全量标签：[0, 1, 2, ..., n]
let allData = [];   // 全量数据：所有采集值

// 初始化图表时，配置 X 轴为线性，并启用动态刻度
const options = {
  scales: {
    x: {
      type: 'linear',
      position: 'bottom',
      min: () => Math.max(0, allLabels.length - WINDOW_SIZE), // 动态最小值
      max: () => Math.max(WINDOW_SIZE - 1, allLabels.length - 1), // 动态最大值
      ticks: {
        stepSize: 1,
        callback: function(value) {
          // 仅对当前窗口内的索引返回标签，其余返回空字符串（隐藏）
          const startIndex = Math.max(0, allLabels.length - WINDOW_SIZE);
          if (value >= startIndex && value <h3>⚠️ 注意事项与最佳实践</h3>

不要手动 shift() 原始数组：这是导致历史丢失的根本原因。全量数据必须保留在 allLabels/allData 中。
min/max 必须为函数：确保每次重绘时动态计算当前窗口边界（如 allLabels.length - 20），而非静态值。
ticks.callback 是关键：它决定哪些 X 轴刻度显示标签，配合 min/max 可精准控制视觉窗口，而数据毫发无损。
缩放兼容性：当用户缩放时，min/max 会被 zoom 插件覆盖，此时 callback 仍生效，可显示任意范围的历史标签。
性能优化：若数据量极大（>10k 点），建议启用 clip: true 并在 update() 前过滤 datasets[0].data 为可视范围子集（非必需，但可防卡顿）。