chart实例须在dom就绪后创建，data.labels与datasets[0].data长度必须一致，canvas宽高需设原生属性而非仅css，纯html场景优先用cdn引入。
Chart 实例必须在 <canvas></canvas> 元素就绪后创建，否则会报 Canvas is null 或图表空白——这不是库的问题，是 DOM 加载时机没卡准。
初始化前必须等 DOM 就绪
把 new Chart() 放在 里或 顶部，几乎必错。浏览器执行 JS 时若 <canvas id="myChart"></canvas> 还没解析到，document.getElementById('myChart') 就返回 null。
实操建议：
- 最稳妥：用
DOMContentLoaded包裹初始化逻辑 - 最简单：把
<script></script>放在前，紧贴页面底部 - 避免在
window.onload里做——它等所有资源（含图片、字体），太晚
data.labels 和 datasets[0].data 长度必须一致
Chart.js 不校验长度匹配，但 mismatch 会导致柱缺一截、折线断开、tooltip 显示错位——现象诡异，错误信息为零，极难定位。
实操建议：
- 初始化前加
console.assert(labels.length === dataValues.length) - 后端返回结构化数据时，让接口直接带
{ labels: [...], datasets: [{ data: [...] }] }，前端不拼接 - 动态更新时，别删旧 chart 再 new 一个，改用
chart.data.labels = newLabels+chart.data.datasets[0].data = newData+chart.update()
canvas 的 width/height 必须设原生属性，不能只靠 CSS
仅写 style="width: 400px; height: 250px"，图表会模糊、拉伸、比例失真。因为 Chart.js 读取的是 canvas 元素的原生 width 和 height 属性（单位像素），CSS 只是缩放渲染层，不提升画布分辨率。
实操建议：
- HTML 中显式写：
<canvas id="myChart" width="400" height="250"></canvas> - JS 动态设置：
canvas.width = 400; canvas.height = 250; - 响应式场景下，监听
resize并调用chart.resize()，不是只改 CSS
CDN 引入比 npm 更适合纯 HTML 场景
如果你只是写一个 index.html 文件，没用构建工具（如 Webpack、Vite），npm 安装后路径难配、node_modules 不会被浏览器直接加载，反而增加出错环节。
实操建议：
- 用 CDN：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> - 版本锁定更稳：
https://cdn.jsdelivr.net/npm/chart.js@4.4.3（当前最新稳定版） - 确保
<script></script>在<canvas></canvas>之后，或至少在前
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
