JavaScript图表需选对库并规避渲染陷阱：Chart.js依赖canvas且要求DOM就绪、数据匹配；D3需手动处理DOM与数据绑定；大数据用Plotly.js或采样；跨域资源致导出失败。
JavaScript 本身不自带图表功能，必须依赖第三方库；选错库或误用渲染方式，图表会不显示、卡顿甚至报错。
用 Chart.js 快速画折线图，但得先确认 canvas 存在
Chart.js 是最轻量且文档友好的选择，但它依赖 <canvas> 元素。常见错误是 JS 执行时 DOM 还没加载完，或者 id 拼写错误导致 document.getElementById() 返回 null。
- 确保 HTML 中有对应
<canvas id="myChart"></canvas>，且该元素在脚本执行前已存在（推荐把<script>放在</body>前，或用DOMContentLoaded包裹） -
new Chart()的第二个参数中，type必须是字符串（如"line"），不是变量名或拼写错误的"Line" - 数据字段名要严格匹配：
labels和datasets[0].data长度必须一致，否则图表空白无报错
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{ data: [12, 19, 3] }]
}
});
D3.js 灵活但容易卡在选择器和数据绑定上
D3.js 不是“画图库”，而是操作 DOM 的数据驱动工具。它不会自动创建坐标轴或颜色映射，所有 SVG 元素都要手动 append、设置属性、绑定数据。新手常卡在 .data().enter().append() 链式调用断裂，或忘记调用 .join()（v6+）或 .exit().remove()（v5-）清理旧元素。
- 用
d3.select('#chart')获取容器后，必须确保它存在且是空的，否则新生成的<circle>可能叠在旧元素上 -
.data()传入数组后，若后续用.attr('cx', d => d.x)，要确认每个d确实有x属性，否则返回NaN导致元素不可见 - 缩放、平移需手动绑定
zoom行为并重绘，不是开箱即用
大数据量时别硬扛 Chart.js，改用 Plotly.js 或分页渲染
Chart.js 渲染超过 5000 个点会明显卡顿，因为每个点都生成一个 <canvas> 绘制指令。而 Plotly.js 底层用 WebGL 加速，对 10 万点折线仍可交互，但体积大（约 1.2MB）、初始化慢。
立即学习“Java免费学习笔记（深入）”；
- 若必须用
Chart.js展示大数据，先做采样：用LTTB（Largest-Triangle-Three-Buckets）算法降点，npm 包叫lttb -
Plotly.js的plotly.newPlot()要传config: { responsive: true }才适配窗口缩放，否则图表溢出 - 服务端分页 + 前端懒加载更稳妥：只请求当前视口时间范围的数据，滚动时再 fetch
导出图片失败？多数是跨域或 canvas 被污染
调用 canvas.toDataURL()（Chart.js 的 toBase64Image() 底层也是它）时若报错 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.，说明 canvas 已被跨域图片污染——比如用了远程图标、背景图或 CDN 上的字体文件。
- 本地开发时，用
file://协议直接打开 HTML 也会触发跨域限制，必须起本地服务（如npx serve） - 图表中避免使用
img标签或CSS background-image引用外部资源；如必须用，服务器需返回Access-Control-Allow-Origin: *，且<img>加crossOrigin="anonymous" -
Plotly.js提供Plotly.downloadImage()，内部处理了部分跨域逻辑，比手撸toDataURL更可靠
真正难的不是“怎么画出来”，而是“怎么让图表在不同设备、不同数据量、不同网络环境下稳定响应”。库的 API 很容易查到，但 canvas 渲染管线、D3 数据绑定生命周期、跨域资源加载顺序这些底层约束，稍不注意就让可视化变成玄学调试。
