纯html无法直接绘制折线图，需借助javascript操作canvas/svg或使用chart.js等库；chart.js最便捷，cdn引入后通过canvas容器和配置数据即可快速生成响应式折线图。
纯 HTML 本身不能画折线图——它没有绘图能力，必须靠 JavaScript 驱动 Canvas 或 SVG，或者引入图表库。直接写 <canvas></canvas> 或 <svg></svg> 标签只是容器，没代码就只是空白。
用 Chart.js 快速画折线图（最省事的方案）
Chart.js 是轻量、易上手、默认响应式的主流选择，CDN 引入即可用，适合快速验证或中小型项目。
- 在
里加 CDN：<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
- 页面中放一个
<canvas id="myChart"></canvas> - JS 初始化时指定
type: 'line'，数据格式必须是数组嵌套对象：const ctx = document.getElementById('myChart').getContext('2d');<br>new Chart(ctx, {<br> type: 'line',<br> data: {<br> labels: ['Jan', 'Feb', 'Mar'],<br> datasets: [{<br> label: 'Sales',<br> data: [12, 19, 3],<br> borderColor: 'rgb(75, 192, 192)',<br> tension: 0.1 // 控制曲线圆滑度，0=折线，>0=贝塞尔平滑<br> }]<br> }<br> - 注意：如果页面 DOM 还没加载完就执行 JS，会报
Cannot read property 'getContext' of null—— 把脚本放前，或用DOMContentLoaded包裹
用原生 SVG 手动画折线（不依赖库，可控性强）
适合定制化需求强、不想引入外部依赖、或需服务端渲染 SVG 的场景。核心是算点坐标 + 连线。
-
<svg></svg>需显式设宽高（如width="600" height="400"），否则可能不显示 - 所有坐标都是像素值，得把原始数据（比如 [0, 25, 50, 75, 100]）映射到 SVG 坐标系：x 按等距分布，y 要反转（SVG y=0 在顶部）
- 用
<polyline></polyline>最简单：<svg width="600" height="400"><br><polyline> fill="none"<br> stroke="#36a2eb"<br> stroke-width="2"<br> points="50,350 150,250 250,150 350,200 450,100"<br> /><br></polyline></svg>
- 容易漏掉的是坐标边界处理：最大值超出 SVG 高度时，点会画到画布外——得提前做 min/max 归一化，或加
clipPath
Canvas API 手绘折线（性能好，适合动态更新）
比 SVG 更底层，适合高频重绘（如实时监控）、大量数据点（>1k）场景，但无内置事件支持，点击某点要自己算距离。
- 先获取上下文：
const ctx = canvas.getContext('2d'); - 必须手动调用
ctx.beginPath()→ctx.moveTo(x, y)→ctx.lineTo(x, y)→ctx.stroke()，缺一步线就不出现 - 常见错误：忘记
ctx.strokeStyle = '#f00'，结果线是默认黑色且难察觉；或没设ctx.lineWidth，细得看不见 - 缩放/响应式要注意：Canvas 的
width/height属性控制绘图分辨率，CSS 的style.width只控制显示尺寸——二者不一致会导致模糊。建议用 JS 同步设置：canvas.width = canvas.offsetWidth;<br>canvas.height = canvas.offsetHeight;<br>ctx.scale(canvas.width / 600, canvas.height / 400); // 按逻辑尺寸缩放
真正麻烦的从来不是“怎么画一条线”，而是数据对齐、坐标转换、空值处理、移动端适配、无障碍支持（比如给 <canvas></canvas> 加 aria-label）。这些细节不处理，图能出来，但一上线就被用户卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
