本文详解如何在 chart.js 中实现“仅显示最近 n 个数据点”的滚动视图效果，同时保留全部历史数据以支持缩放回溯——关键在于动态维护 x 轴标签逻辑，而非简单删除数据。
在构建实时数据日志图表（如传感器监控、性能指标追踪）时，一个常见需求是：界面始终只显示最近 20 个数据点（形成“滚动窗口”），但底层完整保留所有采集的历史数据，以便用户通过缩放插件查看更长时间范围的趋势。初学者常误用 shift() 直接删除旧数据，导致历史不可恢复——这违背了“可视化限制 ≠ 数据丢失”的设计原则。
✅ 正确思路：分离「显示窗口」与「数据存储」
Chart.js 的 labels 数组控制 x 轴刻度显示，而 datasets.data 存储 y 值。要实现“滚动显示 + 全量保留”，需：
- 永远追加新数据到 data.datasets[0].data 和 data.labels（不删除任何项）；
- 动态计算当前窗口内应显示的 labels（例如：当总数据量为 150，窗口大小为 20，则显示 labels[130..149] 对应的数值）；
- 利用 Chart.js 的 scales.x.min/max 或 ticks.source: 'auto' 配合 zoom 插件自动管理可见范围。
以下是优化后的 addDataPoint() 实现（兼容 Chart.js v4+ 与 chartjs-plugin-zoom）：
let totalDataCount = 0;
const WINDOW_SIZE = 20;
function addDataPoint() {
const y = Math.random() * 100;
// 【关键】无条件追加：保留全部历史
chart.data.labels.push(totalDataCount);
chart.data.datasets[0].data.push(y);
totalDataCount++;
// 【关键】仅更新 x 轴显示范围（不影响数据完整性）
if (chart.data.labels.length > WINDOW_SIZE) {
// 计算当前窗口起始索引：显示最后 WINDOW_SIZE 个点
const startIndex = chart.data.labels.length - WINDOW_SIZE;
// 动态设置 x 轴显示范围（触发自动缩放）
chart.options.scales.x.min = chart.data.labels[startIndex];
chart.options.scales.x.max = chart.data.labels[chart.data.labels.length - 1];
} else {
// 初始阶段：从 0 开始显示
chart.options.scales.x.min = 0;
chart.options.scales.x.max = chart.data.labels.length - 1;
}
// 强制刷新坐标系与图表
chart.update('active'); // 使用 'active' 模式提升性能
}
⚠️ 注意事项与最佳实践
- 禁用 ticks.stepSize 干预自动刻度：原代码中 ticks.stepSize: 1 会强制每单位显示一个刻度，在大数据量下导致标签拥挤。建议移除该配置，让 Chart.js 自动优化（或改用 ticks.maxRotation: 0 防重叠）。
- Zoom 插件兼容性：确保 plugins.zoom.pan.mode: 'x' 启用后，用户可水平拖拽查看历史；resetZoom() 会自动恢复到完整数据范围（因所有数据始终存在）。
-
性能优化：当数据量极大（>10k 点）时，可启用 options.plugins.decimation（Chart.js 内置降采样）避免渲染卡顿：
plugins: { decimation: { algorithm: 'lttb', // 保留视觉特征的降采样算法 samples: 1000 // 最多绘制 1000 个点 } } - 时间戳替代序号（进阶）：若实际场景使用时间戳（如 Date.now()），则 labels 应存为字符串或日期对象，并将 scales.x.type 改为 'time'，此时 min/max 直接设为毫秒时间戳即可。
✅ 总结
真正解决“显示固定数量但保留历史”的核心，不是删数据，而是精确控制 x 轴的可视区间（min/max）并确保数据持续追加。这样既满足实时滚动的 UI 需求，又完全兼容 zoom 插件的全量探索能力。修改后，你的数据日志图表将兼具响应性与历史性——这才是工业级数据可视化的正确打开方式。
