JavaScript无内置图表功能，需用第三方库；Chart.js（v3.9.1）最易入门，注意DOM加载和canvas存在性；ECharts适合复杂交互但依赖容器尺寸；D3需理解数据驱动DOM本质；导出图片时字体丢失须针对性处理。
JavaScript 本身不内置图表功能，必须借助第三方库；选错库或初始化方式错误，会导致 chart is not defined、空白画布、数据不渲染等常见问题。
用 Chart.js 快速画柱状图（最轻量入门方案）
Chart.js 是最易上手的选项，CDN 引入即可用，不需要构建工具。但要注意版本差异：v4 要求显式注册控制器和元素，v3 可直接用；新手建议锁定 v3.9.1 避免配置踩坑。
关键步骤：
- 在 HTML 中放一个
<canvas id="myChart"></canvas> - 引入 Chart.js v3 CDN：
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> - JS 中确保 DOM 加载完成后再初始化：
new Chart(document.getElementById('myChart'), { type: 'bar', data: { labels: ['A','B'], datasets: [{ data: [10,20] }] });
漏掉 document.getElementById 或 canvas 不存在，会报 Cannot read properties of null。
立即学习“Java免费学习笔记（深入）”；
用 ECharts 实现带交互的地图与时间轴联动
ECharts 更适合复杂场景（如地理热力图 + 时间滑块），但它的初始化依赖 DOM 容器宽高——如果容器是 display: none 或父元素未设尺寸，图表会渲染失败且无报错。
实操要点：
- 容器必须有明确宽高（CSS 中写死或 JS 动态设置
style.width/style.height） - 地图需单独加载 JSON 文件：
echarts.registerMap('china', chinaJson)，不能直接传 URL - 时间轴联动靠
option.timeline+echarts.connect()，多个实例需用同一 DOM 元素或显式绑定
常见错误：setOption is not a function 多因 echarts.init() 返回值被忽略，或重复 init 同一容器。
避免 D3.js 初学者的三个典型卡点
D3 不是图表库，而是数据驱动 DOM 的底层工具；想“画个折线图”却陷入选择器、比例尺、enter/update/exit 循环中，是新手最常发生的脱节。
真正要用 D3 做可视化，得先确认：
- 是否真的需要自定义渲染逻辑？比如 SVG 动画控制、非标准坐标系、流式数据重绘
- 是否已手动创建
<svg></svg>并正确设置viewBox和尺寸属性 - 是否混淆了
d3.scaleLinear()的 domain/range：domain 是原始数据范围（如[0, 100]），range 是像素位置（如[0, width]），反了就全图压扁或倒置
用 D3 加载 CSV 后没显示数据？大概率是 .data() 后没跟 .enter().append()，或者没调用 selection.join()。
导出图表为图片时字体丢失或模糊
Canvas 导出（toDataURL()）和 SVG 转 PNG（如 canvg）都容易出这问题——尤其是中文或自定义字体。
解决方案取决于库：
- Chart.js：确保字体在
options.plugins.legend.labels.fontFamily中声明，且页面 CSS 已加载对应字体文件 - ECharts：启用
renderer: 'svg'再转 PNG，比 canvas 渲染更保真；导出前调用chart.setOption({ textStyle: { fontFamily: 'sans-serif' } })避免系统找不到字体 - D3：所有文字必须用
<text></text>标签而非 HTML<div>，且 font-family 要写成内联样式或通过 CSS 类预加载 <p>最隐蔽的问题：某些字体（如思源黑体）需显式声明 <code>@font-face并 wait fordocument.fonts.load()才能可靠导出。
