chart

Chart — プロジェクトベースのインタラクティブチャート

Apache ECharts を使用してインタラクティブなチャートページを生成します。各チャートは output/chart-html/ 配下の専用プロジェクトフォルダーに配置されるため、再利用と反復が簡単です。

使用する場面

ユーザーが視覚的なチャートを求めるあらゆる場面: 価格チャート、比較、ダッシュボード、ビジネス分析など。

アーキテクチャ

• レンダリングには ECharts (CDN)
• 信頼性の高い PNG 出力には ECharts ネイティブエクスポート (getDataURL) + canvas マージ
• プロジェクトベースの保存: チャートプロジェクトごとに 1 フォルダー
• ギャラリーモードなし: すべての成果物はプロジェクトフォルダー内に保持されます

プロジェクト構造 (必須)

各チャートプロジェクトは次の構成に従ってください:

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.html	OHLCV 価格チャート
scatter.html	相関、分布
dashboard.html	KPI カード + 2×2 のマルチチャートグリッド
radar.html	多次元スコアリング
heatmap.html	マトリクス / カレンダーの強度
dual-axis.html	スケールが大きく異なる 2 つの系列 (例: 時価総額 vs ステーブルコイン供給量) — 左右の Y 軸、それぞれ独自のラベル色
multi-panel.html	1 つの 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
• プロジェクトの README は create_project(...) によって作成されます

ステップ 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: 画像をエクスポート

2 つのモード:

1. ユーザーが Web ページ + 画像を求める場合: ページツールバーの「💾 Save Image」をクリックすると、現在のプロジェクトに 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>/*	生成されたすべてのチャート成果物

注意事項

• iframe の CORS 問題を避けるため、データは HTML に直接埋め込んでください (const DATA = ...)。
• マルチチャートページでは、すべてのチャートインスタンスを window.CHART_INSTANCES に登録してください。
• 検索しやすいよう、意味のあるプロジェクト名 (topic-range-date) を使用してください。