用Chart.js画商品价格折线图三步即可：引入CDN、添加canvas容器（需id且可见）、用JS渲染；注意日期用ISO格式、价格转数字、JSON按时间升序排列。
用 Chart.js 画商品价格历史折线图最省事
零基础也能三步跑起来：引入库、准备容器、写 JS 渲染。Chart.js 对 HTML 友好，不依赖 jQuery，CDN 直接加载就能用，比原生 Canvas 或 D3 简单太多。
常见错误是把 <canvas></canvas> 写成 <div> 或漏掉 <code>id，导致 document.getElementById('priceChart') 返回 null；还有人把数据写成字符串（比如 "129.9"）而不是数字，折线会断开或不显示。
实操建议：
- 在
底部加 CDN 链接：<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
<canvas id="priceChart" width="400" height="200"></canvas>必须有id，且不能被 CSS 设为display: none - 数据用数组，时间用字符串（如
"2024-04-01"），Chart.js 自动识别并排序；价格必须是数字，可用parseFloat()转
时间轴标签太挤？用 Chart.js 的 time scale 解决
默认用 category 模式画日期，所有标签横向堆一起，根本看不清。换成 time 类型的 x 轴，它会自动抽样、格式化、对齐，而且支持缩放（配合 zoom 插件）。
立即学习“前端免费学习笔记（深入）”；
但要注意：浏览器内置的 time scale 依赖 moment.js 或 date-fns，Chart.js 3+ 已移除内置 moment，得手动配适配器——最简单的是换用 adapters.date（CDN 已打包）。
实操建议：
- 确保 x 轴配置里写
type: 'time'，且time.unit设为'day'或'week'，避免自动崩成毫秒级刻度 - 日期字符串统一用 ISO 格式（
"2024-04-01"），别用"01/04/2024"，否则 Safari 可能解析失败 - 加
ticks.maxRotation: 0和ticks.autoSkip: true防止标签重叠
价格数据从哪来？本地 JSON 最适合零基础练手
别一上来就折腾后端 API。先建个 prices.json 文件，放在同目录下，内容长这样：
[{"date":"2024-04-01","price":129.9},{"date":"2024-04-02","price":126.5}] 然后用 fetch('./prices.json') 加载。
容易踩的坑：Chrome 打开 HTML 文件用 file:// 协议时，fetch 会因 CORS 报错；解决方法是起个最小 HTTP 服务，比如 Python 一行命令：
python3 -m http.server 8000，然后访问
http://localhost:8000。
实操建议：
- JSON 数组必须按时间升序排列，否则折线来回跳；可以用
.sort((a, b) => new Date(a.date) - new Date(b.date))排 - 空值处理：某天没数据就留
null，Chart.js 会自动断开线段，比填 0 更真实 - 别在
fetch外直接用数据——一定要等.then()或async/await回来再初始化图表
移动端点不准、线太细？改两个配置就够了
手机上点某个价格点弹不出提示，大概率是 hitRadius 太小；折线看着发虚，是因为默认 borderWidth: 3 在高清屏上被像素化了。
这不是 bug，是响应式缺失。Chart.js 本身支持 devicePixelRatio 自动适配，但得手动开开关。
实操建议：
- 加
options.plugins.tooltip.mode: 'nearest'和options.interaction.mode: 'nearest'，让点击更灵敏 - 设
options.responsive: true和options.maintainAspectRatio: false，让图表随容器缩放 - 关键一步：在创建 chart 前执行
Chart.defaults.font.size = window.devicePixelRatio > 1 ? 14 : 12;
，顺便把borderWidth提到 4–6
真正卡住人的往往不是语法，而是日期格式不一致、本地文件协议限制、Canvas 容器不可见这三类问题。先跑通一个静态数组的例子，再换 JSON，最后加交互——顺序错了，调试成本翻倍。
