mcpField
C
chart

chart

github.com/starchild-ai-agent数据与数据库303.9k 次安装6 天前更新
代码仓库

关于 chart

用于创建交互式 Apache ECharts 页面及可复现图表文件的项目式制图技能，适合需要复用模板、保存数据与脚本并导出 PNG 的分析和开发工作。

主要功能

  1. 01使用可复用模板构建图表
  2. 02创建自定义图表布局
  3. 03每个图表单独存入项目文件夹
  4. 04保存源数据和生成脚本
  5. 05将图表导出为 PNG

适用场景

  1. 01可视化时间序列趋势和价格数据
  2. 02比较类别或展示构成比例
  3. 03构建多图 KPI 仪表盘
  4. 04保存可复现的图表页面和图片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/starchild-ai-agent/official-skills --skill chart

安装后在 Claude Code 中输入/chart确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

scripts/
base-export.js
base-styles.css
build_chart.py
chart_server.py
templates/
bar.html
candlestick.html
dashboard.html
dual-axis.html
heatmap.html
line.html
multi-panel.html
pie.html
radar.html
scatter.html
waterfall.html

详细介绍

图表 — 基于项目的交互式制图

使用 Apache ECharts 生成交互式图表页面。每张图表都放在 output/chart-html/ 下专属的项目文件夹中，方便重复使用和迭代。

适用场景

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

架构

  • 使用 ECharts（CDN）进行渲染
  • 使用 ECharts 原生导出（getDataURL）+ canvas 合并，可靠地导出 PNG
  • 基于项目存储：每个图表项目对应一个文件夹
  • 无图库模式：所有产物都保留在项目文件夹中

项目结构（必需）

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

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

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

工作流

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

可用模板：

模板适用场景
line.html时间序列趋势、多系列对比
bar.html类别对比、排名
pie.html构成 / 占比细分
candlestick.htmlOHLCV 价格图表
scatter.html相关性、分布
dashboard.htmlKPI 卡片 + 2×2 多图表网格
radar.html多维度评分
heatmap.html矩阵 / 日历强度
dual-axis.html两个数值范围差异很大的系列（例如市值与稳定币供应量）——左右 Y 轴各自带有标签颜色
multi-panel.html共用一个 X 轴的堆叠面板（例如价格 + 成交量 + RSI）——使用单个 ECharts 实例，所有面板间同步提示框 / 缩放
waterfall.html增量贡献细分（例如盈亏归因、预算差异）——正负柱形堆叠在浮动基线上
步骤 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
  • create_project(...) 会创建项目 README
步骤 5：提供预览

建议使用项目根目录提供服务：

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 作为静态预览提供服务）。
步骤 6：导出图像

两种模式：

  1. 用户需要网页 + 图像：点击页面工具栏中的“💾 保存图像”，将其保存到当前项目为 screenshot.png
  2. 用户只需要图像：调用 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。
  • 使用有意义的项目名称（topic-range-date），方便查找。

评论

支持 Markdown