JavaScript原生不支持图表绘制，需依赖Chart.js等库实现动态可视化；Chart.js轻量易用，适合实时折线图，关键在复用data数组并调用update()，避免重复初始化导致“Canvas is already in use”错误。
JavaScript 本身不内置图表绘制能力，直接用原生 Canvas 或 SVG 手动画动态图表成本高、易出错、难维护。真要快速实现动态数据可视化，必须依赖成熟库——Chart.js 是最轻量、文档最清晰、对初学者最友好的选择，D3.js 则适合高度定制但学习曲线陡峭。
为什么不用原生 Canvas 手写动态折线图
看似可控，实则踩坑密集：时间轴对齐需手动算像素、数据流更新时重绘逻辑易漏掉 clearRect()、动画帧控制（requestAnimationFrame）没处理好就卡顿、响应式缩放要监听 window.resize 并重设 canvas width/height 属性（不是 CSS 样式！）。更别说添加 tooltip、图例、导出功能——这些在 Chart.js 里一行配置就能开。
Chart.js 实现每秒刷新的实时折线图
核心是复用 chart.data.datasets[0].data 数组并调用 chart.update()，而非每次 new Chart()。注意三点：
- 初始数据长度要设够（比如
Array(60).fill(null)），避免频繁数组 push/pop 导致 DOM 重排 - 用
chart.data.labels.shift()和chart.data.labels.push(newLabel)维持固定窗口宽度 - 禁用默认动画（
options.animation = false）可提升高频更新流畅度
示例关键片段：
立即学习“Java免费学习笔记（深入）”；
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: Array(60).fill(''),
datasets: [{
data: Array(60).fill(0),
borderColor: '#36A2EB',
tension: 0.4
}]
},
options: {
animation: false,
scales: { y: { beginAtZero: true } }
}
});
setInterval(() => {
const newData = Math.floor(Math.random() * 100);
chart.data.datasets[0].data.push(newData);
chart.data.datasets[0].data.shift();
chart.data.labels.push(new Date().toLocaleTimeString());
chart.data.labels.shift();
chart.update();
}, 1000);
遇到 Canvas is already in use 错误怎么办
这是 Chart.js 的保护机制：同一个 元素被多次初始化。常见于 Vue/React 组件重复挂载、或开发时热更新未销毁旧实例。解决方法只有两个：
- 每次创建新图表前，先检查是否存在旧实例：
if (window.myChart) window.myChart.destroy(); - 确保
元素 ID 唯一，且不要在循环中用相同 ID 创建多个 canvas
别试图用 innerHTML = '' 清空容器——这会丢失 canvas 的绘图上下文，destroy() 才是正确释放方式。
动态图表最难的从来不是“怎么画”，而是“怎么让数据流干净地进、不卡顿地动、出问题时能快速定位”。从 Chart.js 开始，把精力放在数据管道和业务逻辑上，比纠结贝塞尔曲线控制点实在得多。
