Chart.js 初始化需确保 DOM 加载完成，data.labels 与 datasets.data 长度严格匹配，canvas 宽高须设原生属性而非仅 CSS，更新数据后必须调用 chart.update()。
Chart.js 初始化必须等 DOM 加载完成
直接在 <script> 标签里调用 new Chart() 但没等 <canvas> 元素就绪，会报 Canvas is null 或图表空白。浏览器执行 JS 时若 DOM 还没解析完，document.getElementById('myChart') 返回 null，后续所有操作都失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把初始化代码放在
<body>底部（</body>前），确保 canvas 已存在 - 或用
DOMContentLoaded事件包裹：document.addEventListener('DOMContentLoaded', () => { const ctx = document.getElementById('myChart').getContext('2d'); new Chart(ctx, { /* 配置 */ }); }); - 避免在
<head>中同步执行初始化逻辑
data.labels 和 data.datasets 必须严格匹配长度
当 labels 是 5 个字符串，但某个 datasets[0].data 只有 3 个数值，Chart.js 不报错，但图表渲染异常：柱状图缺柱、折线图断开、tooltip 显示错位。这是最隐蔽的数据绑定错误之一。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 初始化前手动校验：
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; const dataValues = [12, 19, 3]; console.assert(labels.length === dataValues.length, 'labels/data length mismatch');
- 后端返回数据时，优先让接口统一返回结构化对象（含
labels和datasets），前端不做拼接 - 使用动态数据时，用
chart.data.labels = newLabels+chart.data.datasets[0].data = newData+chart.update()替代整个重实例化
canvas 宽高必须通过 CSS 或 HTML 属性控制，不能只靠 CSS width/height
仅设置 style="width: 400px; height: 250px" 会导致图表模糊、比例失真——因为 Chart.js 默认读取 canvas 的原生 width/height 属性（单位是像素），而 CSS 只是缩放渲染，不改变画布分辨率。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 正确写法：在 HTML 中显式声明
<canvas id="myChart" width="400" height="250"></canvas>，再用 CSS 控制响应式（如max-width: 100%） - 或 JS 动态设置：
const canvas = document.getElementById('myChart'); canvas.width = 400; canvas.height = 250; - 响应式场景下，监听窗口 resize 并调用
chart.resize()，而非仅改 CSS
更新数据后必须调用 chart.update()，不是重新 new Chart()
直接修改 chart.data.datasets[0].data 数组内容却不调用 update()，界面不会刷新；而每次用 new Chart() 重建，会泄漏 canvas 上下文、触发重复初始化、破坏动画连贯性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 修改数据后必加：
chart.data.datasets[0].data = [10, 20, 30]; chart.update(); - 需要过渡动画？传参：
chart.update({ duration: 500, easing: 'easeOutQuart' }); - 批量更新多个字段（labels、datasets、options）后，只调一次
update()即可，无需分步
Chart.js 绑定数据真正难的不是语法，而是对「canvas 渲染机制」「数据驱动更新时机」「DOM 生命周期」三者的交叉理解。漏掉任一环，都会出现“代码没错却不出图”的情况。
