内嵌报告生成

要解决什么问题

数据分析链路里，常见最后一环是「把查询结果放进页面给人看」。完整 HTML 报告往往和现有后台、文档站或 DuckDB 对话页拼在一起很麻烦：你多半只需要一块可粘贴的 DOM，而不是 <html> 壳、导航和整站样式。本技能面向 嵌入用 HTML 片段：内嵌 Chart.js 图表、KPI 卡片，以及可选的排名表格，由 Host 页面自行引入 Chart.js CDN 和对应 CSS 类。

技能如何工作

触发场景包括：用户提供数据并要求出图/可视化/生成报告；已有 DuckDB、SQL 或 pandas 结果需要图表化；或指定图表类型与数据。可与 chat2duckdb 配合，在查询完成后直接出片段。

核心流程可以概括为：

• 理解数据：区分数值列、分类列、时间列，明确占比、趋势、对比或排名等分析目的
• 选型：按规则选 doughnut/pie、line、bar（垂直或 indexAxis: 'y'）、分组柱图或 KPI 卡片
• 生成：通过 scripts/generate_report.py 或等价 Python 调用，按 kpis 与 charts 配置输出片段
• 布局：KPI 行最多 4 列；图表区默认 2 列网格；单图全宽、三图三列；图高固定 240px

数据侧支持结构化输入（SQL 结果、CSV 摘要、dict/list、手填表格）。charts 的 type 支持 bar、line、doughnut、pie、horizontalBar（内部转为 bar + indexAxis: 'y'）。

边界与注意点

片段采用 亮色专业主题（背景约 #f5f4f0，白卡片），适合商务展示；不包含 文档壳与 Chart.js 引入。同一页面多份嵌入时，canvas ID 默认为 chart0、chart1……需自行改 ID 避免冲突。数值大于 1000 会格式化为千分位；Chart.js 版本按技能约定固定为 4.4.0。样式类如 .report-embed、.charts-grid 等需从 template2.html 或参考资源同步到 Host 页。