chart

用途

Chart 用于生成交互式图表页面，底层渲染引擎为 Apache ECharts（通过 CDN 加载）。当用户需要可视化数据时使用，例如价格图表、数据对比、仪表盘、商业分析等。每个图表以项目为单位存放，便于复用与迭代。

主要能力

支持多种图表模板：折线图（时序趋势、多序列对比）、柱状图（分类对比、排名）、饼图（构成/占比）、K 线图（OHLCV 价格）、散点图（相关性、分布）、仪表盘（KPI 卡片 + 2×2 多图网格）、雷达图（多维评分）、热力图（矩阵/日历强度）、双轴图（两个量级差异很大的序列，左右 Y 轴各自带标签颜色）、多面板图（共享一个 X 轴的堆叠面板，例如价格 + 成交量 + RSI，单一 ECharts 实例，提示与缩放同步）、瀑布图（增量贡献拆解，例如盈亏归因、预算差异，正负柱堆叠在浮动基线上）。
支持自定义布局。
PNG 导出：使用 ECharts 原生导出（getDataURL）+ canvas 合并，输出可靠。
项目制存储：每个图表项目一个文件夹。
无图库模式：所有产物都保留在项目文件夹内。

使用方式

项目结构要求：

output/chart-html/
  <project-name>/
    index.html        # 图表页面
    generate.py       # 生成脚本（用于复现）
    README.md         # 标题 / 描述 / 数据来源说明
    data.json         # 数据快照
    screenshot.png    # 保存的图片

示例文件夹名：btc-90d-20260401

工作流程：

选择模板或自定义布局（可选模板如 line.html、bar.html、pie.html、candlestick.html、scatter.html、dashboard.html、radar.html、heatmap.html、dual-axis.html、multi-panel.html、waterfall.html）。
创建项目文件夹：使用 scripts/build_chart.py 中的 create_project(name, description, data_sources)。
构建并保存图表页面：使用 build_chart(template_name, ...) 或 build_chart_custom(...)，然后通过 save_chart(html, project_dir=project_dir) 保存为项目文件夹中的 index.html。
保存可复现资产：save_generate_script(script_content, project_dir) → generate.py；save_data(data, project_dir) → data.json；项目 README 由 create_project(...) 创建。
提供预览服务（推荐使用项目根目录方式）：

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

v3.0.1 重要行为：chart_server.py 现在会在文件系统查找之前，在内部重写带预览前缀的静态路径（/preview/<id>/... → /...）。这保证预览 iframe 能解析到真正的项目 index.html，而不是回退到根目录列表。请将项目页面保持在 output/chart-html/<project>/index.html（不要在没有 chart_server.py 的情况下直接把 output/chart-html 作为静态预览提供）。

导出图片，两种模式：
- 用户需要网页 + 图片：点击页面工具栏中的“💾 Save Image”，保存到当前项目为 screenshot.png。
- 用户只需要图片：调用 screenshot_chart(project_dir)（Playwright），直接发送 screenshot.png。

工具栏要求：每个图表页面必须包含以下按钮：

<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；使用有意义的项目名（主题-范围-日期）以便查找。

适用场景

任何用户需要可视化图表的场景：价格图表、数据对比、仪表盘、商业分析，以及分析与 BI 数据可视化（例如绘制 BTC 与黄金的对比等）。

限制

资料中未提供收费、价格、平台限制等说明。图表类型与模板以资料列出的为准，未列出的能力暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制