主题与外观

Graphic Walker 提供多层次的视觉自定义：暗色模式、图表渲染主题和完整的 UI 颜色自定义。

暗色模式

通过 appearance 属性控制暗色模式：

// Follow user's OS preference (default)
<GraphicWalker appearance="media" />
 
// Always light
<GraphicWalker appearance="light" />
 
// Always dark
<GraphicWalker appearance="dark" />

图表主题

vizThemeConfig 属性控制图表的渲染方式。选择内置主题或提供自定义 Vega 配置对象：

内置主题

主题	说明
`'vega'`	默认 Vega-Lite 主题
`'g2'`	G2 (AntV) 风格主题
`'streamlit'`	Streamlit 风格主题

<GraphicWalker vizThemeConfig="streamlit" data={data} fields={fields} />

自定义 Vega 配置

传入完整的 Vega/Vega-Lite 配置对象，精细控制图表渲染：

const customTheme = {
  arc: { fill: '#4c78a8' },
  area: { fill: '#4c78a8' },
  bar: { fill: '#4c78a8' },
  line: { stroke: '#4c78a8' },
  point: { fill: '#4c78a8' },
  axis: {
    domainColor: '#888888',
    gridColor: '#e0e0e0',
    tickColor: '#888888',
  },
};
 
<GraphicWalker vizThemeConfig={customTheme} data={data} fields={fields} />

自定义 UI 颜色

uiTheme 属性允许你独立于图表主题自定义 UI 元素（按钮、面板、文本）。它接受 IUIThemeConfig，包含亮色和暗色模式的颜色集：

const uiTheme = {
  light: {
    background: '#ffffff',
    foreground: '#1a1a1a',
    primary: '#6366f1',
    'primary-foreground': '#ffffff',
    muted: '#f1f5f9',
    'muted-foreground': '#64748b',
    border: '#e2e8f0',
    ring: '#6366f1',
  },
  dark: {
    background: '#0f172a',
    foreground: '#f8fafc',
    primary: '#818cf8',
    'primary-foreground': '#0f172a',
    muted: '#1e293b',
    'muted-foreground': '#94a3b8',
    border: '#334155',
    ring: '#818cf8',
  },
};
 
<GraphicWalker uiTheme={uiTheme} data={data} fields={fields} />

颜色集属性

属性	必填	说明
`background`	是	页面/组件背景色
`foreground`	是	主要文本颜色
`primary`	是	主要操作颜色（按钮、链接）
`primary-foreground`	是	主要色元素上的文本颜色
`muted`	是	柔和背景（选中项、分隔线）
`muted-foreground`	是	描述性/次要文本颜色
`border`	是	容器边框颜色
`ring`	是	聚焦环颜色
`card`	否	卡片背景（默认使用 `background`）
`card-foreground`	否	卡片文本颜色（默认使用 `foreground`）
`popover`	否	弹出层背景（默认使用 `background`）
`popover-foreground`	否	弹出层文本颜色（默认使用 `foreground`）
`secondary`	否	次要按钮背景（默认使用 `muted`）
`secondary-foreground`	否	次要按钮文本（默认使用 `primary`）
`accent`	否	悬停状态背景（默认使用 `muted`）
`accent-foreground`	否	悬停状态文本（默认使用 `primary`）
`destructive`	否	危险/删除操作颜色
`destructive-foreground`	否	危险元素上的文本
`dimension`	否	维度字段标记颜色
`measure`	否	度量字段标记颜色
`input`	否	输入框边框颜色（默认使用 `border`）

配色方案

通过 IVisualLayout 中的 colorPalette 属性控制图表编码中使用的配色方案，或使用 scales 属性进行逐通道控制。

分类配色

用于名义数据：accent、category10、category20、category20b、category20c、dark2、paired、pastel1、pastel2、set1、set2、set3、tableau10、tableau20

顺序单色

用于递增的定量值：blues、tealblues、teals、greens、browns、oranges、reds、purples、warmgreys、greys

顺序多色

用于热力图中的定量数据：viridis、magma、inferno、plasma、cividis、turbo、bluegreen、bluepurple、goldgreen、goldorange、goldred、greenblue、orangered、purplebluegreen、purpleblue、purplered、redpurple、yellowgreenblue、yellowgreen、yelloworangebrown、yelloworangered、darkblue、darkgold、darkgreen、darkmulti、darkred、lightgreyred、lightgreyteal、lightmulti、lightorange、lighttealblue

发散配色

用于具有有意义中点的数据：blueorange、brownbluegreen、purplegreen、pinkyellowgreen、purpleorange、redblue、redgrey、redyellowblue、redyellowgreen、spectral

循环配色

用于周期性模式：rainbow、sinebow

自定义比例尺示例

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: {
      scheme: 'tableau10',
    },
    size: {
      rangeMin: 10,
      rangeMax: 100,
    },
  }}
/>

比例尺也可以是接收字段信息的函数：

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: (info) => ({
      scheme: info.semanticType === 'nominal' ? 'tableau10' : 'viridis',
    }),
  }}
/>

图表类型数据计算