颜色映射（Color）
上一篇
事件处理（Event）
下一篇
标题（Title）
Loading...
颜色在可视化中起着非常重要的作用。它可以帮助我们更好地理解数据、突出显示关键信息、增强视觉吸引力和提高可读性。在可视化中颜色通常具有以下作用：
设置数据无关的颜色，通过 mark.style(fill, color) 或者 mark.style(stroke, color) 即可，如果希望设置数据驱动的颜色，可以使用以下方式来设置颜色：
mark.encodemark.style通过 mark.encode 去设置数据驱动的颜色是最常见的方式，同时通过颜色比例尺去配置最后的视觉展示。
scale.identity：恒等映射scale.range：自定义色板scale.palette：内置的色板scale.relations：自定义映射关系当设置颜色比例尺为恒等比例尺（Identity）的时候，color 通道的数据会被作为视觉数据绘制到最后的可视化中，但是不会去生成比例尺。
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: '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', y: 'sold', color: 'color' },scale: { color: { type: 'identity' } }, // 设置该比例尺为恒等映射});chart.render();
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},encode: { x: 'letter', y: 'frequency', color: 'letter' },axis: { y: { labelFormatter: '.0%' } },scale: {color: {type: 'ordinal',range: ['#7593ed', '#95e3b0', '#6c7893', '#e7c450', '#7460eb'],},},});chart.render();
G2 中可以通过设置 scale.palette 去指定色板。这个色板可以是离散的：
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},encode: { x: 'letter', y: 'frequency', color: 'letter' },axis: { y: { labelFormatter: '.0%' } },scale: { color: { palette: 'tableau10' } },});chart.render();
同时也可以是连续的：
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',height: 320,});chart.options({type: '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(),y: (d) => new Date(d.date).getUTCMonth(),color: 'temp_max',},scale: { color: { palette: 'rainbow' } },});chart.render();
G2 提供了一些内置的色板，可以直接使用，并支持 d3-scale-chromatic的色板。
离散色板
连续色板
如果内置的色板不能满足你的要求，也可以试试自定义色板，以下是一个简单的例子，展示了如何自定义注册色板和使用。
import { register, Chart } from '@antv/g2';register('palette.custom', customPalette);const chart = new Chart({container: 'container',});function customPalette() {return ['#FFB3BA', '#98FF98', '#89CFF0', '#FFF9B1', '#D1A3FF'];}chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},encode: { x: 'letter', y: 'frequency', color: 'letter' },axis: { y: { labelFormatter: '.0%' } },scale: { color: { palette: 'custom' } }, // 指定自定义色板});chart.render();
可以通过 scale.relations 去指定一系列映射规则，这个优先级别会高于 domain 到 range 的默认映射方式。比如对于 color 通道来讲，如果希望特定的值映射为特定的颜色，或者处理异常值，这个配置会很有用。
chart.options({type: 'interval',scale: {color: {relations: [['dog', 'red'], // dog 恒等映射为红色[(d) => d === undefined, 'grey'], // 如果是值为 undefined，那么为灰色],},},});
通过 mark.style 来设置颜色，这里设置的颜色比 encode.color 的优先级更高，同时不会生成图例。
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},encode: { x: 'letter', 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();