html无法直接绘图，需通过javascript图表库（如chart.js）动态渲染；须引入库、设置正确dom id、转换数据格式、处理路径与字段匹配，并配置时间轴、坐标轴等参数。
HTML里直接画图表不现实，得靠JavaScript库
纯HTML没有绘图能力，<img> 或 <svg></svg> 只能展示静态结果，没法动态渲染数据。所谓“HTML显示统计图表”，实际是用HTML搭容器，再靠JavaScript把数据喂给图表库渲染。
常见踩坑：把CSV或JSON塞进<script></script>标签就以为能出图——没加载Chart.js或ECharts，页面只会空白。
- 必须引入图表库（如通过
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>） - DOM元素得有明确
id，比如<canvas id="usage-chart"></canvas>，JS才找得到画布 - 数据要转成库要求的格式，
Chart.js要labels和datasets对象，不是随便丢个数组就行
用<img>嵌入占位图时，src路径容易404
很多人想先放个占位图撑布局，用<img src="/static/chart-placeholder.png">，结果控制台报Failed to load resource: the server responded with a status of 404()。
根本原因是路径没对上：开发时本地路径可能是./assets/，但上线后静态资源走CDN或被Webpack重命名，chart-placeholder.png根本不存在。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先用内联SVG占位：
<svg width="600" height="400" viewbox="0 0 600 400"><rect width="100%" height="100%" fill="#f5f5f5"></rect><text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="14">Usage Chart</text></svg> - 如果非要
<img>，确保路径是绝对URL或经构建工具处理过的public/下资源 - 加
onerror兜底：<img src="..." onerror="this.style.display='none'">，避免破图影响排版
Chart.js渲染使用量折线图的关键参数
统计“使用量”通常是时间序列（如每天调用量），Chart.js的line类型最常用，但几个参数不设对，图表就看起来很怪。
比如X轴时间错乱、Y轴数值被截断、线条太细看不清——基本都是配置漏了。
-
xAxes.time.unit必须设为'day'或'hour'，否则自动识别可能把2024-05-01当字符串处理 -
ticks.maxRotation设0，防止日期标签歪着挤成一团 -
elements.line.borderWidth至少2，默认1在高分屏上几乎看不见 - 数据点少于5个时，加
spanGaps: true，否则断开的点不会连成线
const config = {
type: 'line',
data: { labels: ['2024-05-01', '2024-05-02'], datasets: [{ data: [120, 189 }] },
options: {
scales: {
x: { type: 'time', time: { unit: 'day' }, ticks: { maxRotation: 0 } },
y: { beginAtZero: true }
},
elements: { line: { borderWidth: 2 } }
}
};
服务端返回JSON结构不匹配，前端图表直接白屏
后端接口返回{"data": [{"date": "2024-05-01", "count": 120}]}，但前端JS硬写response.labels，结果labels是undefined，Chart.js初始化失败，控制台报Cannot read property 'length' of undefined。
这不是图表库的问题，是数据契约没对齐。前后端得约定好字段名，或者前端做一层适配。
- 永远用
console.log(response)确认结构，别凭印象写response.data[0].timestamp - 用
Array.map()转换字段：labels: res.data.map(d => d.date), datasets: [{ data: res.data.map(d => d.count) }] - 加防御性判断：
if (!Array.isArray(res.data)) throw new Error('Invalid API response')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
