在HTML中引入Chart.js需用CDN脚本标签，确保canvas元素已加载再初始化图表，设置canvas的width/height属性而非仅CSS，并校验data结构正确性。
怎么在HTML里引入Chart.js并让图表显示出来
直接用 <script> 标签引入官方 CDN 就能跑，不需要构建工具或 npm。但很多人卡在「页面空白」——不是代码写错了，而是 DOM 元素还没加载完就执行了图表初始化。
- 必须等
<canvas>元素存在于页面中，再调用new Chart()，否则报错Canvas is null - 推荐把初始化代码放在
<script>标签末尾，或用window.addEventListener('DOMContentLoaded', ...) - CDN 地址选带版本号的，比如
https://cdn.jsdelivr.net/npm/chart.js@4.4.3，避免缓存导致行为不一致
示例片段：
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, { type: 'bar', data: { labels: ['A','B'], datasets: [{ data: [10,20] }] } });
</script>
为什么<canvas>必须有明确宽高，不能只靠CSS拉伸
Chart.js 会读取 <canvas> 的原生 width 和 height 属性来计算像素密度和渲染精度。如果只用 CSS 设置大小（比如 style="width:400px;height:200px"），图表会模糊、错位，甚至响应式失效。
- 正确做法：同时设置 HTML 属性和 CSS，例如
<canvas width="400" height="200" style="width:400px;height:200px"> - 响应式场景下，别依赖 CSS 缩放，改用 Chart.js 自带的
responsive: true+maintainAspectRatio: false - 如果动态创建
<canvas>，记得手动赋值canvas.width和canvas.height，不能只设style
new Chart() 初始化时报Canvas is already in use怎么办
这个错误意味着同一个 <canvas> 被重复传给 new Chart() —— 常见于 Vue/React 组件重渲染、AJAX 加载后反复初始化、或手误写了两次 new Chart()。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 每次初始化前先检查是否已有实例：
if (window.myChart) window.myChart.destroy(); - 把 Chart 实例存在变量里，后续更新数据用
.data.labels = [...]+.update()，而不是重建 - 在单页应用中，确保组件卸载时调用
chart.destroy()，否则内存泄漏 + 再次挂载时报错
用type: 'line'或'bar'时，数据格式不对会导致图表空白
Chart.js 对 data 结构很敏感。最常见的是把数组直接塞进 datasets，而没包成对象；或者 labels 和 data 长度不一致。
- 必须是
datasets: [{ label: 'xxx', data: [1,2,3] }]，不是datasets: [1,2,3] -
labels是顶层字段，和datasets同级，不是嵌在 dataset 里 - 数值必须是数字，字符串如
"1"会被当无效值跳过，图上显示空点或断点
一个最小可运行结构：
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3]
}]
}
});
真正麻烦的不是写第一张图，而是后续要支持暗色模式、服务端渲染、或从 API 动态换数据——这些时候初始化时机、实例管理、数据校验的细节全会冒出来。
