Chart实例须在DOM就绪后创建，data.labels与datasets[0].data长度必须一致，canvas宽高需设原生属性而非仅CSS，纯HTML场景优先用CDN引入。
Chart 实例必须在 <canvas> 元素就绪后创建，否则会报 Canvas is null 或图表空白——这不是库的问题，是 DOM 加载时机没卡准。
初始化前必须等 DOM 就绪
把 new Chart() 放在 <head> 里或 <body> 顶部，几乎必错。浏览器执行 JS 时若 <canvas id="myChart"> 还没解析到，document.getElementById('myChart') 就返回 null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 最稳妥：用
DOMContentLoaded包裹初始化逻辑 - 最简单：把
<script>放在</body>前，紧贴页面底部 - 避免在
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>在<canvas>之后，或至少在</body>前
