推荐Chart.js——轻量（<70KB）、无需后端、仅依赖原生canvas，正确做法是确保canvas存在后再初始化，避免DOM未加载导致getContext报错。
怎么在纯 HTML 页面里快速画出柱状图
不用搭服务、不写后端，直接在 index.html 里引入一个轻量图表库就能出图。推荐用 Chart.js —— 它只依赖 canvas，现代浏览器原生支持，连 jQuery 都不用。
常见错误是把 chart.min.js 放在 <body> 底部但没等 DOM 加载完就执行绘图代码，结果报 Cannot read property 'getContext' of null。正确做法是确保 <canvas id="myChart"> 已存在，再初始化。
- 在
<head>或<body>底部加：<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
- 页面中放一个带
id的<canvas>标签，别漏掉width/height或用 CSS 拉伸（会模糊） - 初始化写在
window.onload或DOMContentLoaded里，或者把<script>放在</body>前
echarts 和 chart.js 哪个更适合静态页
ECharts 功能强、主题多、地图和时间轴支持好，但体积大（压缩后约 400KB），首次渲染慢；Chart.js 压缩后不到 70KB，API 简单，适合展示销售趋势、分类统计这类基础图表。
如果你只是想在个人作品集里放个“技术栈掌握程度”雷达图，用 Chart.js 三行配置就能跑起来；但要是想嵌入带缩放的历年气温折线图，且数据来自 JSON 文件，ECharts 的异步加载和坐标轴自动适配更省心。
立即学习“前端免费学习笔记（深入）”；
-
Chart.js不支持直接读取外部 JSON，得用fetch()手动取数据再塞进data.datasets -
ECharts提供echarts.init(dom).setOption({})，option 可以直接包含dataset或用series.source指向 URL - 两者都不需要构建工具，但
ECharts的按需引入（比如只引line和tooltip）得配合 webpack 才生效，静态页里还是全量引入
本地数据怎么喂给图表（JSON / CSV / 内联）
静态页没有后端，所有数据必须前端加载或硬编码。三种方式按优先级排序：内联 > JSON 文件 > CSV（需额外解析）。
内联最稳：把数据直接写成 JS 对象，避免跨域或加载失败问题。例如柱状图的 labels 和 data 数组直接写死在 new Chart() 参数里。JSON 文件次之，但要注意路径——如果用相对路径 ./data.json，必须通过 http-server 或 VS Code Live Server 打开，双击 index.html 会触发浏览器 CORS 策略报错 net::ERR_FILE_PROTOCOL。
- CSV 需要引入
PapaParse解析，增加额外请求和复杂度，除非数据源固定且频繁更新 - JSON 中字段名要和图表库要求对齐，比如
Chart.js要求datasets[0].data是数值数组，不能是对象数组（除非用parser配置） - 时间类数据（如 “2023-05”）在
Chart.js里要用time类型坐标轴，并指定adapter（默认不带，得额外引chartjs-adapter-date-fns）
移动端图表变形、点击失效怎么办
默认 <canvas> 在手机上会因缩放失真，触摸事件也不响应。根本原因是 Chart.js 默认禁用响应式交互（为性能考虑），而 ECharts 的 renderer: 'canvas' 在 iOS Safari 下偶尔有点击穿透。
- 给
<canvas>加style="max-width: 100%; height: auto;"并设置options.responsive = true，否则图表不会随屏幕缩放 -
Chart.js的点击事件监听要写在plugins里或用getElementAtEvent()，别直接绑click到 canvas 上（坐标会错） - 如果图表区域小、数据点密，iOS 上长按可能触发系统菜单，加
style="-webkit-tap-highlight-color: transparent;"到 canvas 父容器
