Back to Details

sgds-data-visualisation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SGDS Data Visualisation Pattern

SGDS 数据可视化模式

SGDS does not bundle a charting library. For data visualisation, use Apache ECharts and apply the SGDS colour palette so charts remain visually consistent with your design system.
SGDS 并未捆绑任何图表库。进行数据可视化时，请使用 Apache ECharts 并应用SGDS调色板，确保图表与你的设计系统在视觉上保持一致。

Prerequisites

前提条件

  • Complete base project setup per sgds-getting-started.
  • Install and configure ECharts independently — see https://echarts.apache.org/.

Installing ECharts

安装ECharts

ECharts is not included in 
@govtechsg/sgds-web-component
. Install it separately:
bash
npm install echarts
Then import and initialise per the ECharts getting started guide:
js
import * as echarts from "echarts";

const chart = echarts.init(document.getElementById("chart"));
chart.setOption(option);
ECharts 未包含在 
@govtechsg/sgds-web-component
中，需单独安装：
bash
npm install echarts
然后按照 ECharts 入门指南 进行导入和初始化：
js
import * as echarts from "echarts";

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

SGDS Colour Palette for ECharts

适用于ECharts的SGDS调色板

Apply the SGDS palette by setting the 
color
array in your chart option. The values below are the raw hex values of the SGDS data-visualisation primitive tokens:
TokenHex
--sgds-purple-600
#ac1cdb
--sgds-cyan-600
#00758d
--sgds-green-600
#0e7c3d
--sgds-blue-600
#0269d0
--sgds-yellow-600
#7e6917
通过在图表配置项中设置 
color
数组来应用SGDS调色板。以下是SGDS数据可视化基础令牌的原始十六进制值：
令牌十六进制值
--sgds-purple-600
#ac1cdb
--sgds-cyan-600
#00758d
--sgds-green-600
#0e7c3d
--sgds-blue-600
#0269d0
--sgds-yellow-600
#7e6917

Per-chart (recommended)

单图表配置（推荐）

Set 
color
directly in the chart option. ECharts cycles through the colours sequentially across series:
js
const option = {
  color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"],
  // ... rest of chart option
};
直接在图表配置项中设置 
color
。ECharts会按顺序在各系列中循环使用这些颜色：
js
const option = {
  color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"],
  // ... 其余图表配置项
};

Global theme (all charts on the page)

全局主题（页面所有图表）

Register a named theme once at app startup, then pass the theme name when initialising each chart:
js
import * as echarts from "echarts";

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

const chart = echarts.init(document.getElementById("chart"), "sgds");
在应用启动时注册一个命名主题，然后在初始化每个图表时传入主题名称：
js
import * as echarts from "echarts";

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

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

For AI Agents

针对AI Agent的说明

  1. ECharts is not provided by SGDS — always tell users to install it separately from https://echarts.apache.org/.
  2. The five SGDS palette colours are fixed hex values taken from the primitive tokens. Do not reference CSS variables inside the ECharts 
    color
    array — ECharts does not resolve CSS custom properties.
  3. For a single chart, set 
    color
    in the option object. For multiple charts sharing the same palette, use 
    echarts.registerTheme()
    once at app startup.
  4. Palette order: purple → cyan → green → blue → yellow. ECharts cycles through them automatically across series.
  1. ECharts 并非由SGDS提供 —— 务必告知用户需从 https://echarts.apache.org/ 单独安装。
  2. SGDS调色板的五种颜色是取自基础令牌的固定十六进制值。请勿在ECharts的 
    color
    数组中引用CSS变量 —— ECharts无法解析CSS自定义属性。
  3. 单个图表可在配置对象中设置 
    color
    ；若多个图表共享同一调色板，请在应用启动时调用一次 
    echarts.registerTheme()
    。
  4. 调色板顺序：紫色 → 青色 → 绿色 → 蓝色 → 黄色。ECharts会自动在各系列中循环使用这些颜色。