用 html + javascript + chart.js 可快速搭建无需后端的代码质量看板，但必须手动定义可归因、可行动、有基线的指标（如 high-risk issues、pr 审查时长），并规范 dom 结构、时间轴配置、数据模拟与口径文档化。
直接说结论：用 HTML + JavaScript + Chart.js 就能快速搭出可落地的代码质量度量看板，不需要后端、不依赖 CI/CD 插件，但必须手动定义度量口径，否则图表全是“好看但没用”的数字。
度量指标怎么选才不跑偏
很多人一上来就堆 lines_of_code、cyclomatic_complexity、test_coverage，结果发现数据波动大、团队不认、老板看不懂。真正能推动改进的指标得满足三个条件：可归因、可行动、有基线。
-
critical_severity_issues（高危缺陷数）比总 bug 数更有价值，因为它能直接关联到线上故障风险 -
avg_pr_review_time_hours比 “平均代码行数” 更反映协作效率，且容易从 Git 日志里提取 -
build_failure_rate_7d要带时间窗口，静态值（如“当前失败率”）会掩盖趋势，也难对比 - 避免用
code_smells_count这类工具强依赖项——不同 SonarQube 版本规则不一致，同一份代码跑两次可能差 30%
HTML 结构里最容易漏掉的 DOM 容器
Chart.js 渲染前必须确保目标 <canvas id="metric-chart"></canvas> 已存在且尺寸明确。常见错误是把图表初始化写在 里，或放在未加载的异步模块之后，导致 document.getElementById('metric-chart') === null。
- 所有图表容器统一用
<div class="chart-container"><canvas id="xxx"></canvas></div>包裹，CSS 设定最小宽高（比如min-height: 300px），防止空白区域塌陷 - 不要用
display: none隐藏图表容器——Chart.js 在不可见状态下无法正确测量尺寸，会导致渲染错位或空白 - 如果看板要支持多项目切换，
id必须动态生成（如id="coverage-chart-${projectId}"），否则多个图表共用一个 ID 会只渲染第一个
Chart.js 初始化时绕不开的坑
度量数据通常是时间序列（比如每天的测试覆盖率），但 Chart.js 默认不处理日期轴。直接传 ["2026-06-24", "2026-06-25"] 当 labels，图表会按字符串排序，不是按时间顺序。
- 启用
time类型 x 轴：配置type: 'time'、time: { unit: 'day', tooltipFormat: 'MMM DD' }，data 中 dates 必须是 ISO 格式字符串或 Date 对象 - 多指标共用一个时间轴时，
datasets的data数组长度必须严格一致，缺值填null，不能省略或用 0 替代（否则趋势线会连错点） - 对
test_coverage这类百分比指标，y 轴建议设min: 0, max: 100, ticks: { stepSize: 10 }，避免自动缩放导致“85% 看起来像满格” - 禁用动画（
animation: false）——度量看板不是演示页，每次刷新都动效反而干扰趋势判断
本地调试时数据怎么模拟才像真的一样
别用随机数生成假数据。度量值有强业务约束：覆盖率不会突变 ±30%，构建失败率通常集中在 0–5%，缺陷密度在 0.1–2.0 之间浮动。
- 用真实历史片段截取：从 SonarQube 或 Jenkins API 导出最近 30 天 JSON，删掉敏感字段，存为
mock/metrics.json - 写个简单 JS 函数模拟波动：
const jitter = (base, range) => base + (Math.random() - 0.5) * range;，比如jitter(82, 3)生成 80.5–83.5 区间值 - 关键阈值线（如
coverage_target: 80）必须硬编码进配置，而不是算出来的——它代表的是团队约定，不是统计结果 - 加载失败时显示
<div class="alert">数据源不可达，请检查 metrics.json 路径</div>，而不是静默白屏
最常被忽略的其实是度量口径文档化：同一个 critical_severity_issues 在不同项目里是否包含第三方依赖漏洞？是否排除了已知误报？这些细节必须写在看板底部的 <small>指标说明</small> 里，否则看板越好看，误解越深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
