chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chart — Project-Based Interactive Charting

图表——基于项目的交互式图表生成

Generate interactive chart pages with Apache ECharts. Each chart lives in a dedicated project folder under

output/chart-html/

, making it easy to reuse and iterate.

使用Apache ECharts生成交互式图表页面。每个图表都存放在

output/chart-html/

下的专属项目文件夹中，便于复用和迭代。

When to Use

使用场景

Any time the user wants a visual chart: price charts, comparisons, dashboards, business analytics, etc.

当用户需要可视化图表时均可使用：价格图表、对比分析、仪表盘、商业分析等。

Architecture

架构设计

ECharts (CDN) for rendering
ECharts native export (
getDataURL
) + canvas merge for reliable PNG output
Project-based storage: one folder per chart project
No gallery mode: all artifacts stay in the project folder

ECharts（CDN）用于渲染
ECharts原生导出（
getDataURL
）+ 画布合并用于生成可靠的PNG输出
基于项目的存储：每个图表项目对应一个文件夹
无画廊模式：所有产物均保存在项目文件夹内

Project Structure (Required)

项目结构（必填）

Each chart project should follow:

output/chart-html/
  <project-name>/
    index.html        # chart page
    generate.py       # generation script (for reproducibility)
    README.md         # title / description / data source notes
    data.json         # data snapshot
    screenshot.png    # saved image

Example folder name:

btc-90d-20260401

每个图表项目需遵循以下结构：

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

示例文件夹名称：

btc-90d-20260401

Workflow

工作流程

Step 1: Pick template or custom layout

步骤1：选择模板或自定义布局

Available templates:

Template	Best for
`line.html`	Time-series trends, multi-series comparisons
`bar.html`	Category comparisons, rankings
`pie.html`	Composition / share breakdown
`candlestick.html`	OHLCV price charts
`scatter.html`	Correlation, distribution
`dashboard.html`	KPI cards + 2×2 multi-chart grid
`radar.html`	Multi-dimension scoring
`heatmap.html`	Matrix / calendar intensity
`dual-axis.html`	Two series with very different scales (e.g. market cap vs stablecoin supply) — left and right Y axes, each with its own label color
`multi-panel.html`	Stacked panels sharing one X axis (e.g. price + volume + RSI) — single ECharts instance, tooltip/zoom synced across all panels
`waterfall.html`	Incremental contribution breakdown (e.g. P&L attribution, budget variance) — positive/negative bars stacked on a floating base

可用模板：

模板	适用场景
`line.html`	时间序列趋势、多系列对比
`bar.html`	分类对比、排名
`pie.html`	构成占比拆分
`candlestick.html`	OHLCV价格图表
`scatter.html`	相关性、分布情况
`dashboard.html`	KPI卡片 + 2×2多图表网格
`radar.html`	多维度评分
`heatmap.html`	矩阵/日历热力图
`dual-axis.html`	两个差异极大的系列（如市值与稳定币供应量）——左右Y轴，各带专属标签颜色
`multi-panel.html`	共享X轴的堆叠面板（如价格+成交量+RSI）——单个ECharts实例，所有面板的提示框/缩放同步
`waterfall.html`	增量贡献拆分（如损益归因、预算差异）——正负条形堆叠在浮动基准上

Step 2: Create project folder

步骤2：创建项目文件夹

Use

create_project(name, description, data_sources)

from

scripts/build_chart.py

调用

scripts/build_chart.py

中的

create_project(name, description, data_sources)

函数。

Step 3: Build and save chart page

步骤3：构建并保存图表页面

Use either:

```
build_chart(template_name, ...)
```
```
build_chart_custom(...)
```

Then save as

index.html

in the project folder:

save_chart(html, project_dir=project_dir)

可选择以下方式之一：

```
build_chart(template_name, ...)
```
```
build_chart_custom(...)
```

然后将结果保存为项目文件夹中的

index.html

：

save_chart(html, project_dir=project_dir)

Step 4: Save reproducible assets

步骤4：保存可复现资产

Also save:

save_generate_script(script_content, project_dir)

→

generate.py

```
save_data(data, project_dir)
```
→
```
data.json
```
project README is created by
```
create_project(...)
```

同时保存：

save_generate_script(script_content, project_dir)

→

generate.py

```
save_data(data, project_dir)
```
→
```
data.json
```
项目README由
```
create_project(...)
```
自动创建

Step 5: Serve preview

步骤5：预览服务

Use project-root serving (recommended):

python

preview_serve(
  title="Chart Preview",
  dir="skills/chart/scripts",
  command="python3 chart_server.py /data/workspace/output/chart-html 7860",
  port=7860
)

Then open:

/preview/<id>/<project-name>/index.html

推荐使用项目根目录服务：

python

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

Step 6: Export image

步骤6：导出图片

Two modes:

User wants web page + image: click "💾 Save Image" in page toolbar, saves to current project as
```
screenshot.png
```
User wants image only: call
```
screenshot_chart(project_dir)
```
(Playwright) and send
```
screenshot.png
```
directly

两种模式：

用户需要网页+图片：点击页面工具栏中的“💾 Save Image”，图片将保存到当前项目文件夹为
```
screenshot.png
```
用户仅需图片：调用
```
screenshot_chart(project_dir)
```
（Playwright）并直接发送
```
screenshot.png
```

Toolbar Requirements

工具栏要求

Every chart page must include these buttons:

html

<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>

Do not include gallery entry.

每个图表页面必须包含以下按钮：

html

<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>

请勿添加画廊入口。

Key Files

关键文件

File	Purpose
`skills/chart/scripts/base-styles.css`	Base dark theme CSS
`skills/chart/scripts/base-export.js`	Export helpers: download/copy/save-to-project
`skills/chart/scripts/build_chart.py`	Project creation, HTML build, data/script save, screenshot
`skills/chart/scripts/chart_server.py`	Static server + `/save-chart` API
`skills/chart/templates/*.html`	Reusable chart templates
`output/chart-html/<project>/*`	All generated chart artifacts

文件	用途
`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>/*`	所有生成的图表产物

Notes

注意事项

Embed data directly in HTML (
```
const DATA = ...
```
) to avoid iframe CORS issues.
For multi-chart pages, register all chart instances in
```
window.CHART_INSTANCES
```
.
Use meaningful project names (
```
topic-range-date
```
) for easy lookup.

将数据直接嵌入HTML（
```
const DATA = ...
```
）以避免iframe跨域问题。
对于多图表页面，需将所有图表实例注册到
```
window.CHART_INSTANCES
```
中。
使用有意义的项目名称（
```
主题-范围-日期
```
）以便查找。