logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3-beta.0
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • sunburst
      • point
      • polygon
      • range
      • rangeX
      • rangeY
      • rect
      • shape
      • text
      • vector
      • wordCloud
    • 视图(View)
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • 编码(Encode)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • 转换(Transform)
      • 概览
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectY
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • 坐标系(Coordinate)
      • 概览
      • fisheye
      • parallel
      • polar
      • radial
      • theta
      • transpose
      • cartesian3D
      • helix
    • 样式(Style)
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 状态(State)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 复合(Composition)
      • 概览
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 事件(Event)
    • 颜色映射(Color)
  • 图表组件
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
  • 进阶主题
    • 关系图(Graph)
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • 地图(Geo)
      • geoPath
      • geoView
    • 3D 图表(3D Chart)
      • 绘制 3D 图表
      • point3D
      • line3D
      • interval3D
      • surface3D
    • 插件扩展(Plugin)
      • renderer
      • rough
      • lottie
    • 按需打包
    • 设置纹理
    • 绘制 3D 图表
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

颜色映射(Color)

上一篇
事件(Event)
下一篇
标题(Title)

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

颜色在可视化中起着非常重要的作用。它可以帮助我们更好地理解数据、突出显示关键信息、增强视觉吸引力和提高可读性。在可视化中颜色通常具有以下作用:

  • 区分数据类别:区分不同的数据类别。例如,在柱状图中,我们可以使用不同的颜色表示不同的产品类别,以便更容易地识别和比较它们。
  • 表示数据的数量:表示数据的数量。例如,在热力图中,我们可以使用颜色的深浅来表示数据的大小,深色表示较大的值,浅色表示较小的值。
  • 突出显示关键信息:突出显示关键信息。例如,在折线图中,我们可以使用鲜艳的颜色表示关注的数据点,以便更容易地找到它们。
  • 增强视觉吸引力:使可视化更具吸引力。使用鲜艳的颜色和有趣的配色方案可以让可视化更加生动和有趣。
  • 提高可读性:提高可视化的可读性。例如,在地图上,我们可以使用不同的颜色表示不同的地理区域,以便更容易地识别和理解它们。

设置数据无关的颜色,通过 mark.style(fill, color) 或者 mark.style(stroke, color) 即可,如果希望设置数据驱动的颜色,可以使用以下方式来设置颜色:

  • 编码:mark.encode
  • 样式:mark.style

编码

通过 mark.encode 去设置数据驱动的颜色是最常见的方式,同时通过颜色比例尺去配置最后的视觉展示。

  • scale.identity:恒等映射
  • scale.range:自定义色板
  • scale.palette:内置的色板
  • scale.relations:自定义映射关系

Identity

当设置颜色比例尺为恒等比例尺(Identity)的时候,color 通道的数据会被作为视觉数据绘制到最后的可视化中,但是不会去生成比例尺。

(() => {
const chart = new G2.Chart();
chart
.interval()
.data([
{ genre: 'Sports', sold: 275, color: 'red' },
{ genre: 'Strategy', sold: 115, color: 'blue' },
{ genre: 'Action', sold: 120, color: 'green' },
{ genre: 'Shooter', sold: 350, color: 'red' },
{ genre: 'Other', sold: 150, color: 'black' },
])
.encode('x', 'genre')
.encode('y', 'sold')
.encode('color', 'color')
.scale('color', { type: 'identity' }); // 设置该比例尺为恒等映射
chart.render();
return chart.getContainer();
})();

Range

(() => {
const chart = new G2.Chart();
chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.encode('x', 'letter')
.encode('y', 'frequency')
.encode('color', 'letter')
.axis('y', { labelFormatter: '.0%' })
.scale('color', {
type: 'ordinal',
range: ['#7593ed', '#95e3b0', '#6c7893', '#e7c450', '#7460eb'],
});
chart.render();
return chart.getContainer();
})();

Palette

G2 中可以通过设置 scale.palette 去指定色板。这个色板可以是离散的:

(() => {
const chart = new G2.Chart();
chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.encode('x', 'letter')
.encode('y', 'frequency')
.encode('color', 'letter')
.axis('y', { labelFormatter: '.0%' })
.scale('color', { palette: 'tableau10' });
chart.render();
return chart.getContainer();
})();

同时也可以是连续的:

(() => {
const chart = new G2.Chart({
height: 320,
});
chart
.cell()
.data({
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/seattle-weather.json',
})
.transform({ type: 'group', color: 'max' })
.encode('x', (d) => new Date(d.date).getUTCDate())
.encode('y', (d) => new Date(d.date).getUTCMonth())
.encode('color', 'temp_max')
.scale('color', { palette: 'rainbow' });
chart.render();
return chart.getContainer();
})();

内置色板

G2 提供了一些内置的色板,可以直接使用,并支持 d3-scale-chromatic的色板。

离散色板

accent
blues
brBG
buGn
buPu
category10
dark2
gnBu
greens
greys
oranges
orRd
paired
pastel1
pastel2
piYG
pRGn
puBu
puBuGn
puOr
puRd
purples
rdBu
rdGy
rdPu
rdYlBu
rdYlGn
reds
set1
set2
set3
spectral
tableau10
ylGn
ylGnBu
ylOrBr
ylOrRd

连续色板

blues
brBG
buGn
buPu
cividis
cool
cubehelixDefault
gnBu
greens
greys
inferno
magma
oranges
orRd
piYG
plasma
pRGn
puBu
puBuGn
puOr
puRd
purples
rainbow
rdBu
rdGy
rdPu
rdYlBu
rdYlGn
reds
sinebow
spectral
turbo
viridis
warm
ylGn
ylGnBu
ylOrBr
ylOrRd

自定义色板

如果内置的色板不能满足你的要求,也可以试试自定义色板,以下是一个简单的例子,展示了如何自定义注册色板和使用。

(() => {
G2.register('palette.custom', customPalette);
const chart = new G2.Chart();
function customPalette() {
return ['#FFB3BA', '#98FF98', '#89CFF0', '#FFF9B1', '#D1A3FF'];
}
chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.encode('x', 'letter')
.encode('y', 'frequency')
.encode('color', 'letter')
.axis('y', { labelFormatter: '.0%' })
.scale('color', { palette: 'custom' }); // 指定自定义色板
chart.render();
return chart.getContainer();
})();

Relations

可以通过 scale.relations 去指定一系列映射规则,这个优先级别会高于 domain 到 range 的默认映射方式。比如对于 color 通道来讲,如果希望特定的值映射为特定的颜色,或者处理异常值,这个配置会很有用。

chart.interval().scale('color', {
relations: [
['dog', 'red'], // dog 恒等映射为红色
[(d) => d === undefined, 'grey'], // 如果是值为 undefined,那么为灰色
],
});

样式

通过 mark.style 来设置颜色,这里设置的颜色比 encode.color 的优先级更高,同时不会生成图例。

(() => {
const chart = new G2.Chart();
chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
})
.encode('x', 'letter')
.encode('y', 'frequency')
.style('fill', (datum, index, data) => {
const { frequency } = datum;
if (frequency > 0.1) return '#3376cd';
if (frequency > 0.05) return '#f4bb51';
return '#b43a29';
});
chart.render();
return chart.getContainer();
})();