JavaScript数据可视化应优先选用成熟图表库而非手写Canvas/SVG，因库已封装坐标轴、响应式、交互等底层逻辑；Chart.js适合快速原型但定制弱，D3.js自由度高但学习成本大，ECharts、Plotly.js、ApexCharts各有适用场景。
JavaScript 实现数据可视化，核心是「用 DOM 或 Canvas 渲染图表，并把数据映射成视觉元素（如柱高、折线坐标、饼图角度）」。不依赖库也能做，但实际项目几乎都选成熟图表库——它们解决了坐标轴计算、响应式缩放、交互事件绑定、无障碍支持等底层细节。
为什么不能直接用 canvas 或 svg 手写所有图表？
手写 canvas 绘制一个带 tooltip 和缩放的折线图，要处理：时间轴刻度自动分级、数值到像素坐标的双向映射、鼠标 hover 时最近数据点查找、移动端 touch 事件兼容、导出 PNG 的 canvas 导出逻辑……这些重复工作已有库封装好。除非你做的是极简定制需求（比如只画 3 根带颜色的柱子），否则手写性价比极低。
Chart.js 适合快速原型和中小型仪表盘
它基于 canvas，API 简洁，对初学者友好，但自定义渲染能力有限。常见踩坑点：
-
options.scales.x.time.unit设为'month'却没配adapters.date，导致时间轴显示 NaN - 启用
responsive: true后，父容器没设明确width，图表高度塌陷 - 多 Y 轴时，第二个
yAxes（v2）或y1（v3+）没在datasets[n].yAxisID中显式指定，数据全挤在主轴上
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } }
}
});
D3.js 是底层能力最强、自由度最高的选择
它不是“图表库”，而是“数据驱动文档”的操作工具。你可以用它画 SVG 柱状图、力导向图、地理热力图，甚至非标准可视化（比如基因序列比对视图）。代价是代码量大、学习曲线陡：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“Java免费学习笔记（深入）”；
- 没有内置坐标轴组件，
d3.scaleLinear()和d3.axisBottom()需手动组合 - 更新数据时，必须显式调用
.data().enter().append()+.exit().remove()，否则旧元素残留 -
d3.zoom()默认禁用双指缩放，需加touchable: true
const x = d3.scaleBand()
.domain(data.map(d => d.month))
.range([0, width]);
const bars = svg.selectAll('rect').data(data);
bars.enter().append('rect')
.attr('x', d => x(d.month))
.attr('y', d => y(d.value))
.attr('height', d => height - y(d.value))
.attr('width', x.bandwidth());其他主流库的适用边界
ECharts：百度开源，中文文档完善，3D 图表、地理坐标系、大数据量渲染（dataset + renderMode: 'canvas'）表现突出，但部分高级配置项（如自定义 markLine 文本位置）文档模糊；Plotly.js：科学计算场景首选，原生支持数学公式渲染（LaTeX）、子图联动、WebGL 加速散点图，但打包体积大（gzip 后约 400KB）；ApexCharts：Vue/React 封装友好，动画细腻，但 SSR 支持弱，服务端渲染时容易报 window is not defined。
选型真正关键的不是功能多寡，而是团队是否愿意为某个库长期维护适配逻辑——比如 ECharts 的 theme 切换需要重载整个实例，而 Chart.js 只需改 options.plugins.legend.labels.color。
