JavaScript图表需依赖第三方库，因浏览器无原生图表API；Chart.js轻量易用但Canvas限制交互，D3.js灵活但学习成本高，Plotly.js强于科学计算与导出，ECharts擅长大数据与中文生态。
JavaScript 创建图表不靠原生 API，得用第三方库——浏览器没内置绘图引擎，canvas 或 svg 只是底层画布，真正做图表得靠封装好的可视化库。
Chart.js 适合快速上手的静态/简单交互图表
轻量（约60KB）、文档清晰、支持响应式，适合仪表盘小部件、报表页面嵌入。默认用 canvas 渲染，性能好但无法直接选中文本或绑定 DOM 事件到单个数据点。
- 常见错误：在未初始化
canvas元素时就 new Chart()，报Canvas is null—— 确保 DOM 已加载，或用document.addEventListener('DOMContentLoaded', ...) - 时间轴 X 轴需手动配置
type: 'time'并引入moment.js或用 Chart.js 3+ 内置的adapters.date - 导出图片用
chart.toBase64Image()，但注意跨域图片资源会触发tainted canvas错误
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: { labels: ['Jan', 'Feb'], datasets: [{ data: [12, 19] }] },
options: { responsive: true }
});
D3.js 是底层控制力最强的选择，但不是“开箱即用”的图表库
D3.js 不提供 BarChart() 这类高级组件，它暴露的是数据绑定、DOM 操作、比例尺、坐标系等原语。适合定制化强、动画复杂、需深度控制 SVG 结构的场景（比如地理热力图、关系网络图）。
- 容易踩坑：直接用
d3.select().data().enter().append()但忘了.exit().remove()，导致重复渲染、内存泄漏 - 与 React/Vue 共存时，别把 D3 当作状态驱动工具——它操作真实 DOM，和虚拟 DOM 冲突；推荐只用它生成 SVG 片段，再交由框架管理容器
-
scaleBand()和scalePoint()常混淆：前者为条形图留间隙，后者为散点图对齐中心，选错会导致柱子错位
Plotly.js 适合科学计算、多视图联动与导出需求
基于 WebGL + SVG 混合渲染，原生支持 3D 图表、子图（subplots）、缩放平移、鼠标悬停公式渲染（LaTeX）。文件体积大（~500KB），但交互体验接近桌面软件。
tidy-excel-data
下载
清理、标准化、验证并汇总杂乱的 Excel 工作簿。当 Codex 需要处理 `.xlsx`、`.xls`、`.xlsm` 或 `.csv` 格式的数据时使用，包括：统一表头格式、删除空白行与空白列、修剪文本内容、去重记录、检测数据质量问题、拆分或合并工作表、生成清洗后的工作簿，以及为业务电子表格生成审计摘要。
立即学习“Java免费学习笔记（深入）”；
- 使用场景：金融 K 线图、实验数据对比、带误差棒的统计图
- 注意
plotly.newPlot()的第二个参数必须是数组（即使只画一个 trace），写成对象会静默失败 - 导出 PNG/SVG/Excel 依赖客户端
plotly.js内置逻辑，无需后端；但导出高分辨率图需显式设置toImageButtonOptions.width/height - React 封装版
@plotly/react有 SSR 问题，服务端渲染时需条件加载
ECharts 在中文生态和大数据量渲染上优势明显
百度开源，中文文档完整，dataset 配置方式降低代码冗余，内置地图 JSON、主题切换、服务端渲染（SSR）支持。对十万级点的散点图、树图、桑基图优化充分。
- 性能关键：大数据量时务必开启
progressive: 3000（渐进渲染），否则卡死 - 地图组件依赖
echarts-gl（3D）或echarts/map/js/china（矢量），漏引会报undefined map - 事件监听用
chart.on('click', params => {...})，但params结构因图表类型而异（如饼图含name，折线图含value和seriesName）
const chart = echarts.init(document.getElementById('main'));
chart.setOption({
xAxis: { type: 'category', data: ['Mon', 'Tue'] },
yAxis: { type: 'value' },
series: [{ data: [120, 200], type: 'line' }]
});
选库前先问清楚：要不要服务端渲染？是否要导出 Excel？数据更新频率是秒级还是分钟级？移动端缩放是否必须？这些细节比“哪个最流行”更能决定最终体验。ECharts 和 Chart.js 下载量高，但 D3 和 Plotly 在特定场景里不可替代——没有银弹，只有权衡。
