本文详解如何在 chart.js 中实现固定窗口（如20个点）的实时数据图表，既保持滚动更新效果，又不删除旧数据，确保缩放时仍可查看完整历史记录。
在构建数据日志类应用时，一个常见需求是：图表始终只显示最近 N 个数据点（例如 20 个），新数据从右侧进入，旧数据“滑出”视野左侧，但实际数据不能丢失——以便用户通过缩放插件回溯全部历史。你当前遇到的问题（shift() 删除数据后无法缩放查看旧值）正是混淆了“视觉窗口”与“数据存储”的区别。
✅ 正确思路：分离「数据存储」与「显示范围」
- 所有采集的数据都应保留在 datasets.data 和 labels 中（不调用 shift() 删除）；
- 仅通过配置 scales.x.min / scales.x.max 动态限制 x 轴可见范围，实现“滚动视图”效果；
- Zoom 插件会自动基于完整数据进行缩放，无需额外处理。
以下是优化后的核心实现（兼容 Chart.js v4+ 及 chartjs-plugin-zoom）：
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('chartCanvas').getContext('2d');
const windowSize = 20; // 固定显示点数
const data = {
labels: [],
datasets: [{
label: 'Value',
data: [],
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.1)',
tension: 0.3 // 可选：让折线更平滑
}]
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Live Data Logger (20-point window)'
},
legend: { position: 'bottom' },
zoom: {
zoom: {
wheel: { enabled: true },
drag: { enabled: true },
mode: 'x' // 推荐仅 x 轴缩放，避免 y 轴失真
},
pan: { enabled: true, mode: 'x' }
}
},
scales: {
x: {
type: 'linear',
position: 'bottom',
ticks: { stepSize: 1 },
// 关键：初始不设 min/max，由脚本动态控制
min: undefined,
max: undefined
},
y: { beginAtZero: true }
}
};
const chart = new Chart(ctx, { type: 'line', data, options });
let timestamp = 0;
function addDataPoint() {
const y = Math.random() * 100;
// ✅ 永远追加：保留全部历史数据
chart.data.labels.push(timestamp);
chart.data.datasets[0].data.push(y);
timestamp++;
// ✅ 动态设置 x 轴显示范围（仅影响视图，不删数据）
const len = chart.data.labels.length;
if (len > windowSize) {
chart.options.scales.x.min = chart.data.labels[len - windowSize];
chart.options.scales.x.max = chart.data.labels[len - 1];
} else {
// 数据不足 windowSize 时，显示全部
chart.options.scales.x.min = chart.data.labels[0];
chart.options.scales.x.max = undefined; // 自动适配
}
// ⚠️ 必须调用 update() 才能生效
chart.update('active'); // 使用 'active' 避免动画卡顿
}
setInterval(addDataPoint, 250);
// 重置缩放：恢复为显示全部数据
document.getElementById('resetZoomButton').addEventListener('click', () => {
chart.resetZoom();
});
});? 关键要点说明
- 不调用 shift() 或 pop()：chart.data.labels 和 chart.data.datasets[0].data 始终累积增长，这是支持缩放的基础。
- 动态控制 scales.x.min/max：每次新增数据后，计算当前窗口的起始标签（labels[len - windowSize]）和结束标签（labels[len - 1]），赋值给 chart.options.scales.x，再调用 chart.update()。
- chart.update('active') 更高效：跳过非必要动画，适合高频更新场景。
- Zoom 插件完全兼容：因底层数据完整，缩放/拖拽时可自由浏览任意历史区间；点击 “Reset Zoom” 即恢复全量视图。
- 标签建议用时间戳或递增整数：避免使用 length 作为 label（易导致逻辑混乱），改用独立计数器（如 timestamp++）更可靠。
? 进阶提示
- 若需支持多传感器，可为每个 dataset 独立维护窗口逻辑；
- 结合 requestAnimationFrame 替代 setInterval 可提升渲染流畅度；
- 对超大数据集（>10k 点），建议启用 clip: true 并配合 decimation 插件优化性能。
通过此方案，你将获得一个真正“既滚动又可追溯”的专业级数据日志图表——视觉上稳定显示最新 20 点，底层数据毫发无损，缩放体验丝滑自然。
