sgds-data-visualisation

SGDS データ可視化パターン

SGDS にはチャートライブラリは含まれていません。データを可視化するには、Apache ECharts を使用し、SGDS のカラーパレットを適用して、チャートの見た目をデザインシステム全体で統一してください。

---

前提条件

• sgds-getting-started に従って、ベースプロジェクトのセットアップを完了してください。
• ECharts は個別にインストールして設定してください。詳しくは https://echarts.apache.org/ をご覧ください。

---

ECharts のインストール

ECharts は @govtechsg/sgds-web-component に含まれていません。別途インストールしてください。

npm install echarts

次に、ECharts のスタートガイド に従ってインポートし、初期化してください。

import * as echarts from "echarts";

const chart = echarts.init(document.getElementById("chart"));
chart.setOption(option);

---

ECharts 用 SGDS カラーパレット

チャートオプションの color 配列を設定して、SGDS のパレットを適用してください。以下の値は、SGDS のデータ可視化プリミティブトークンの 16 進数の値です。

トークン	16 進数
--sgds-purple-600	#ac1cdb
--sgds-cyan-600	#00758d
--sgds-green-600	#0e7c3d
--sgds-blue-600	#0269d0
--sgds-yellow-600	#7e6917

チャートごと（推奨）

チャートオプションに color を直接設定してください。ECharts は系列ごとに色を順番に適用します。

const option = {
  color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"],
  // ... rest of chart option
};

グローバルテーマ（ページ上のすべてのチャート）

アプリの起動時に名前付きテーマを一度登録し、各チャートの初期化時にテーマ名を渡してください。

import * as echarts from "echarts";

echarts.registerTheme("sgds", {
  color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"],
});

const chart = echarts.init(document.getElementById("chart"), "sgds");

---

AI エージェント向け

1. ECharts は SGDS から提供されません。必ず https://echarts.apache.org/ から個別にインストールするようユーザーに案内してください。
2. SGDS の 5 色のパレットは、プリミティブトークンから取得した固定の 16 進数値です。ECharts は CSS カスタムプロパティを解決できないため、ECharts の color 配列では CSS 変数を参照しないでください。
3. 1 つのチャートでは、オプションオブジェクトに color を設定してください。同じパレットを複数のチャートで共有する場合は、アプリの起動時に echarts.registerTheme() を一度使用してください。
4. パレットの順序は、紫 → シアン → 緑 → 青 → 黄です。ECharts は系列ごとにこれらの色を自動的に順番に適用します。