chart-image

チャート画像ジェネレーター

Vega-Lite を使って、データから PNG チャート画像を生成します。ヘッドレスサーバー環境に最適です。

このスキルを使う理由

Fly.io／VPS／Docker へのデプロイ向けに構築されています：

• ✅ ネイティブコンパイル不要 - 事前ビルド済みバイナリを使用する Sharp を採用しています（ビルドツールが必要な canvas とは異なります）
• ✅ Puppeteer／ブラウザー不要 - 純粋な Node.js で動作し、Chrome のダウンロードやヘッドレスブラウザーによるオーバーヘッドはありません
• ✅ 軽量 - Puppeteer ベースのソリューションでは 400MB 以上になるのに対し、依存関係は合計約 15MB です
• ✅ コールドスタートが高速 - ブラウザーの起動待ちがなく、500ms 未満でチャートを生成します
• ✅ オフラインで動作 - 外部 API 呼び出しはありません（QuickChart.io とは異なります）

セットアップ（初回のみ）

cd /data/clawd/skills/chart-image/scripts && npm install

すぐに使う

node /data/clawd/skills/chart-image/scripts/chart.mjs \
  --type line \
  --data '[{"x":"10:00","y":25},{"x":"10:30","y":27},{"x":"11:00","y":31}]' \
  --title "Price Over Time" \
  --output chart.png

チャートの種類

折れ線チャート（デフォルト）

node chart.mjs --type line --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output line.png

棒グラフ

node chart.mjs --type bar --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output bar.png

面グラフ

node chart.mjs --type area --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output area.png

円グラフ／ドーナツグラフ

# Pie
node chart.mjs --type pie --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
  --category-field category --y-field value --output pie.png

# Donut (with hole)
node chart.mjs --type donut --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
  --category-field category --y-field value --output donut.png

ローソク足チャート（OHLC）

node chart.mjs --type candlestick \
  --data '[{"x":"Mon","open":100,"high":110,"low":95,"close":105}]' \
  --open-field open --high-field high --low-field low --close-field close \
  --title "Stock Price" --output candle.png

ヒートマップ

node chart.mjs --type heatmap \
  --data '[{"x":"Mon","y":"Week1","value":5},{"x":"Tue","y":"Week1","value":8}]' \
  --color-value-field value --color-scheme viridis \
  --title "Activity Heatmap" --output heatmap.png

複数系列の折れ線チャート

1 つのチャートで複数の傾向を比較します：

node chart.mjs --type line --series-field "market" \
  --data '[{"x":"Jan","y":10,"market":"A"},{"x":"Jan","y":15,"market":"B"}]' \
  --title "Comparison" --output multi.png

積み上げ棒グラフ

node chart.mjs --type bar --stacked --color-field "category" \
  --data '[{"x":"Mon","y":10,"category":"Work"},{"x":"Mon","y":5,"category":"Personal"}]' \
  --title "Hours by Category" --output stacked.png

出来高の重ね合わせ（Y 軸を 2 つ使用）

出来高の棒グラフに価格の折れ線を重ねます：

node chart.mjs --type line --volume-field volume \
  --data '[{"x":"10:00","y":100,"volume":5000},{"x":"11:00","y":105,"volume":3000}]' \
  --title "Price + Volume" --output volume.png

スパークライン（インラインの小型チャート）

node chart.mjs --sparkline --data '[{"x":"1","y":10},{"x":"2","y":15}]' --output spark.png

スパークラインのデフォルトサイズは 80x20 で、背景は透明、軸はありません。

オプション一覧

基本オプション

オプション	説明	デフォルト
--type	チャートの種類：line、bar、area、point、pie、donut、candlestick、heatmap	line
--data	データポイントの JSON 配列	-
--output	出力ファイルのパス	chart.png
--title	チャートのタイトル	-
--width	幅（ピクセル単位）	600
--height	高さ（ピクセル単位）	300

軸のオプション

オプション	説明	デフォルト
--x-field	X 軸のフィールド名	x
--y-field	Y 軸のフィールド名	y
--x-title	X 軸のラベル	フィールド名
--y-title	Y 軸のラベル	フィールド名
--x-type	X 軸の種類：ordinal、temporal、quantitative	ordinal
--y-domain	Y 軸の範囲を「min,max」で指定	auto

表示オプション

オプション	説明	デフォルト
--color	折れ線／棒の色	#e63946
--dark	ダークモードのテーマ	false
--svg	PNG ではなく SVG を出力	false
--color-scheme	Vega のカラースキーム（category10、viridis など）	-

アラート／モニターのオプション

オプション	説明	デフォルト
--show-change	最後のポイントに増減率（+／-%）の注釈を表示	false
--focus-change	Y 軸をデータ範囲の 2 倍に拡大	false
--focus-recent N	直近の N 個のデータポイントのみを表示	all
--show-values	最小値／最大値のピークポイントにラベルを表示	false

複数系列／積み上げのオプション

オプション	説明	デフォルト
--series-field	複数系列の折れ線チャートに使うフィールド	-
--stacked	積み上げ棒グラフモードを有効化	false
--color-field	積み上げ／色分けのカテゴリに使うフィールド	-

ローソク足のオプション

オプション	説明	デフォルト
--open-field	OHLC の始値フィールド	open
--high-field	OHLC の高値フィールド	high
--low-field	OHLC の安値フィールド	low
--close-field	OHLC の終値フィールド	close

円グラフ／ドーナツグラフのオプション

オプション	説明	デフォルト
--category-field	円グラフのスライスのカテゴリに使うフィールド	x
--donut	ドーナツグラフとして描画（中央に穴を表示）	false

ヒートマップのオプション

オプション	説明	デフォルト
--color-value-field	ヒートマップの強度に使うフィールド	value
--y-category-field	Y 軸のカテゴリフィールド	y

2 軸オプション（共通）

オプション	説明	デフォルト
--y2-field	2 つ目の Y 軸のフィールド（右側の独立した軸）	-
--y2-title	2 つ目の Y 軸のタイトル	フィールド名
--y2-color	2 つ目の系列の色	#60a5fa (dark) / #2563eb (light)
--y2-type	2 つ目の軸のチャートの種類：line、bar、area	line

例： 売上の棒グラフ（左）＋解約率の面グラフ（右）：

node chart.mjs \
  --data '[{"month":"Jan","revenue":12000,"churn":4.2},...]' \
  --x-field month --y-field revenue --type bar \
  --y2-field churn --y2-type area --y2-color "#60a5fa" \
  --y-title "Revenue ($)" --y2-title "Churn (%)" \
  --x-sort none --dark --title "Revenue vs Churn"

出来高オーバーレイのオプション（ローソク足）

オプション	説明	デフォルト
--volume-field	出来高バーに使用するフィールド（2軸を有効化）	-
--volume-color	出来高バーの色	#4a5568

書式設定オプション

オプション	説明	デフォルト
--y-format	Y 軸の形式：percent、dollar、compact、decimal4、integer、scientific、または d3-format 文字列	auto
--subtitle	チャートタイトルの下に表示するサブタイトル	-
--hline	水平基準線：「value」、「value,color」、または「value,color,label」（繰り返し指定可）	-

注釈オプション

オプション	説明	デフォルト
--annotation	静的テキスト注釈	-
--annotations	イベントマーカーの JSON 配列	-

アラート形式のチャート（モニターに推奨）

node chart.mjs --type line --data '[...]' \
  --title "Iran Strike Odds (48h)" \
  --show-change --focus-change --show-values --dark \
  --output alert.png

直近のアクションのみを表示する場合：

node chart.mjs --type line --data '[hourly data...]' \
  --focus-recent 4 --show-change --focus-change --dark \
  --output recent.png

タイムライン注釈

チャート上にイベントをマークします：

node chart.mjs --type line --data '[...]' \
  --annotations '[{"x":"14:00","label":"News broke"},{"x":"16:30","label":"Press conf"}]' \
  --output annotated.png

時系列 X 軸

日付の間隔を適切に反映する時系列の場合：

node chart.mjs --type line --x-type temporal \
  --data '[{"x":"2026-01-01","y":10},{"x":"2026-01-15","y":20}]' \
  --output temporal.png

X 値が ISO 形式の日付で、均等な間隔ではなく実際の時間間隔を反映させたい場合は、--x-type temporal を使用します。

Y 軸の書式設定

軸の値を読みやすく整形します：

# Dollar amounts
node chart.mjs --data '[...]' --y-format dollar --output revenue.png
# → $1,234.56

# Percentages (values as decimals 0-1)
node chart.mjs --data '[...]' --y-format percent --output rates.png
# → 45.2%

# Compact large numbers
node chart.mjs --data '[...]' --y-format compact --output users.png
# → 1.2K, 3.4M

# Crypto prices (4 decimal places)
node chart.mjs --data '[...]' --y-format decimal4 --output molt.png
# → 0.0004

# Custom d3-format string
node chart.mjs --data '[...]' --y-format ',.3f' --output custom.png

使用可能なショートカット：percent、dollar/usd、compact、integer、decimal2、decimal4、scientific

チャートのサブタイトル

タイトルの下に補足情報を追加します：

node chart.mjs --title "MOLT Price" --subtitle "20,668 MOLT held" --data '[...]' --output molt.png

テーマの選択

ダークモードには --dark を使用します。時刻に応じて自動選択する場合：

• 夜間（現地時間 20:00～07:00）：--dark
• 日中（現地時間 07:00～20:00）：ライトモード（デフォルト）

データのパイプ処理

echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node chart.mjs --output out.png

カスタム Vega-Lite 仕様

高度なチャートの場合：

node chart.mjs --spec my-spec.json --output custom.png

⚠️ 重要：画像を必ず送信してください！

チャートを生成したら、必ずユーザーのチャンネルに送り返してください。 ファイルに保存して説明するだけではなく、視覚的に示すことが重要です。

# 1. Generate the chart
node chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png

# 2. Send it! Use message tool with filePath:
#    action=send, target=<channel_id>, filePath=/data/clawd/tmp/my-chart.png

ヒント：

• /tmp/（削除される可能性あり）ではなく、/data/clawd/tmp/（永続的）に保存します
• filePath を指定して action=send を使用します。thread-reply はファイル添付に対応していません
• メッセージ本文に簡潔なキャプションを含めます
• イスラエル時間の 20:00～07:00 は --dark を自動的に使用します

---

更新日：2026-02-04 - --y-format（percent/dollar/compact/decimal4）と --subtitle を追加