应优先选用Chart.js而非原生Canvas绘图，因其轻量易用、兼容性好；原生实现需手动处理坐标、响应式、边界情况等，易出错且代码量大；Chart.js初始化需满足canvas元素存在、数据结构合法、库已加载三大条件。
JavaScript 本身不内置图表绘制能力，直接用原生 Canvas 或 SVG 手动画图成本高、易出错，实际项目中应优先选用成熟图表库——Chart.js 是最轻量、易上手且兼容性好的选择。
为什么不用原生 Canvas 手写柱状图
手动计算坐标、处理缩放、响应式、图例交互、动画等，50 行代码起步，且 ctx.fillRect() 不处理数据越界、空值、负数堆叠等边界情况。常见错误包括：Uncaught TypeError: Cannot read property 'length' of undefined（数据格式不对）、canvas.width is 0（DOM 未挂载完就渲染）。
- 数据必须是数组，不能是对象字面量或 Promise 未 resolve 的结果
- Canvas 元素需在 DOM 中存在且尺寸明确，
getBoundingClientRect()比offsetWidth更可靠 - 高频重绘（如实时数据流）需手动
ctx.clearRect()，否则残留旧图
Chart.js 初始化的三个硬性条件
Chart.js 依赖 HTML <canvas> 元素、合法数据结构、以及已加载的库脚本。缺一不可。
-
<canvas id="myChart"></canvas>必须存在于页面中，且不能被display: none隐藏（可用visibility: hidden替代） - 数据字段名固定为
labels和datasets，datasets[0].data必须是数值数组，如[12, 19, 3, 5] - 初始化前确保
Chart构造函数已定义，CDN 加载需等script标签执行完毕，或用import('chart.js')动态导入
折线图里 time 类型 X 轴踩坑点
当 X 轴为时间（如日志时间戳），必须显式配置 type: 'time' 并指定 time.unit，否则图表会把时间戳当普通数字渲染成乱码横轴。
立即学习“Java免费学习笔记（深入）”；
-
labels字段失效，改用data[0].data中每个对象的x属性，如{x: '2024-04-01', y: 24} - 需引入
chart.js/auto（含日期适配器）或单独加载date-fns/moment.js，否则报错Cannot read property 'set' of undefined - 时间格式建议统一用 ISO 8601 字符串（
'2024-04-01T00:00:00'），避免浏览器解析差异
导出 PNG 时 canvas 被跨域图片污染
如果图表中用了外部 CDN 的图标、背景图或用户头像，调用 toDataURL('image/png') 会触发 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'。
- 解决方案：所有图片资源加
crossOrigin="anonymous"属性，并确保服务端返回Access-Control-Allow-Origin: * - 临时绕过：改用
html2canvas截图容器 div，但精度和性能不如原生 canvas 导出 - 服务端渲染（如 Node.js + Puppeteer）可彻底规避，但增加部署复杂度
真正难的不是画出一根线，而是让图表在 Safari 14、屏幕阅读器、深色模式、缩放 150%、断网重试这些真实场景下依然可用——这些细节几乎不会出现在“教程”里，但会卡住上线前最后一小时。
