html-data-reportlisted
Install: claude install-skill huangjun124114/skills
# HTML 数据分析报告：构建 + 验证
用于「把数据变成一份可直接翻阅的 HTML 报告」，并且**必须验证渲染结果**。
本技能的核心价值在第 2 部分——多数报告"看起来生成了"但图表其实没渲染。
---
## 0. 环境前置（Windows / WorkBuddy sandbox）
**这个环境的 bash 没有 coreutils**：`ls` / `mkdir` / `head` / `tail` / `wc` / `cat` 全部 `command not found`。
`PowerShell` 工具可能无回显（本文环境实测无输出）。
→ **所有文件操作走 node 或 Python**：
```bash
node.exe -e "require('fs').mkdirSync('中间产物',{recursive:true}); console.log('ok')"
python.exe -c "import os; os.makedirs('中间产物/shot',exist_ok=True)"
```
- 托管 node：`C:/Users/Administrator/.workbuddy/binaries/node/versions/22.22.2-3/node.exe`
- 托管 python：`C:/Users/Administrator/.workbuddy/binaries/python/versions/3.13.12/python.exe`
**不要试图装 Playwright/Puppeteer**：`npm install` 会触发 `wsl.exe` 被安全策略拦截。
系统已装 Chrome/Edge，直接用：
`C:\Program Files (x86)\Google\Chrome\Application\chrome.exe`
`C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe`
---
## 1. 构建报告
### 1.1 结构约定
- 生成脚本放 `中间产物/build_report.py`，计算脚本放 `中间产物/analyze.py`
- 数据经 `metrics.json` 中转：analyze.py → metrics.json → build_report.py → HTML
- 报告 = 纯 HTML 模板字符串，用 `.replace("__DATA__", json.dumps(...))` 注入数据
（**不要用 f-string**，CSS 的花括号会炸）
- 交付文件名带日期：`xxx报告_MMDD.html`
### 1.2 Chart.js 内联（离线可用）
先下载到本地，再内联，缺失时回退 CDN：
```python
_cj = os.path.join(BASE, "中间产物", "chart.umd.min.js")
if os.path.exists(_cj):
_src = open(_cj, encoding="utf-8").read().replace("</script>", "<\\/script>")
_tag = "<" + "script>" + _src + "</" + "script>"
else:
_tag = '<script src="https://cdn.jsdelivr.net/npm/chart.js@4