用途
Chart 用于在用户需要可视化图表时生成交互式图表页面，适用于价格图表、对比、仪表盘、商业分析等场景。图表基于 Apache ECharts 渲染，采用项目制组织，每个图表单独存放在 output/chart-html/ 下的项目文件夹中，便于复用和迭代。
主要能力
图表模板
技能提供以下可复用模板及其适用场景：
| 模板 | 适用场景 |
|---|---|
| line.html | 时间序列趋势、多序列对比 |
| bar.html | 类别对比、排名 |
| pie.html | 构成/占比拆分 |
| candlestick.html | OHLCV 价格图表 |
| scatter.html | 相关性、分布 |
| dashboard.html | KPI 卡片 + 2×2 多图网格 |
| radar.html | 多维度评分 |
| heatmap.html | 矩阵/日历强度 |
| dual-axis.html | 量纲差异很大的两个序列（如市值 vs 稳定币供应量），左右 Y 轴各有独立标签颜色 |
| multi-panel.html | 共享一个 X 轴的堆叠面板（如价格 + 成交量 + RSI），单一 ECharts 实例，提示框/缩放跨所有面板同步 |
| waterfall.html | 增量贡献拆解（如损益归因、预算差异），正负柱堆叠在浮动基线上 |
渲染与导出
- 使用 ECharts（CDN）渲染。
- 使用 ECharts 原生导出（getDataURL）+ canvas 合并，实现可靠的 PNG 输出。
- 项目制存储：每个图表项目一个文件夹。
- 无画廊模式：所有产物保留在项目文件夹中。
项目结构（必需）
echo 'output/chart-html/ <project-name>/ index.html # 图表页面 generate.py # 生成脚本（用于可复现） README.md # 标题/描述/数据来源说明 data.json # 数据快照 screenshot.png # 保存的图片'
文件夹命名示例：btc-90d-20260401
使用方式
第 1 步：选择模板或自定义布局
从上述模板中选择，或使用自定义布局。
第 2 步：创建项目文件夹
使用 scripts/build_chart.py 中的 create_project(name, description, data_sources)。
第 3 步：构建并保存图表页面
使用以下任一方式：
- build_chart(template_name, ...)
- build_chart_custom(...)
然后保存为项目文件夹中的 index.html：
save_chart(html, project_dir=project_dir)
第 4 步：保存可复现资产
同时保存：
- save_generate_script(script_content, project_dir) → generate.py
- save_data(data, project_dir) → data.json
- 项目 README 由 create_project(...) 创建
第 5 步：提供预览服务
使用项目根目录服务（推荐）：
echo 'preview_serve( title="Chart Preview", dir="skills/chart/scripts", command="python3 chart_server.py /data/workspace/output/chart-html 7860", port=7860 )'
然后打开：/preview/<id>/<project-name>/index.html
第 6 步：导出图片
两种模式：
- 用户需要网页 + 图片：点击页面工具栏中的“💾 Save Image”，保存到当前项目为 screenshot.png。
- 用户只需要图片：调用 screenshot_chart(project_dir)（Playwright）并直接发送 screenshot.png。
工具栏要求
每个图表页面必须包含以下按钮：
echo '<div class="actions"> <button onclick="downloadPNG(this)">📥 Download PNG</button> <button onclick="copyToClipboard(this)">📋 Copy Image</button> <button onclick="saveToProject(this)">💾 Save Image</button> </div>'
不要包含画廊入口。
关键文件
| 文件 | 用途 |
|---|---|
| skills/chart/scripts/base-styles.css | 基础深色主题 CSS |
| skills/chart/scripts/base-export.js | 导出辅助：下载/复制/保存到项目 |
| skills/chart/scripts/build_chart.py | 项目创建、HTML 构建、数据/脚本保存、截图 |
| skills/chart/scripts/chart_server.py | 静态服务器 + /save-chart API |
| skills/chart/templates/*.html | 可复用图表模板 |
| output/chart-html/<project>/* | 所有生成的图表产物 |
注意事项
- 将数据直接嵌入 HTML（const DATA = ...）以避免 iframe CORS 问题。
- 对于多图页面，将所有图表实例注册到 window.CHART_INSTANCES。
- 使用有意义的项目名称（主题-范围-日期），便于查找。
限制
资料未提供关于收费、价格、平台兼容性等方面的信息，暂未提供。