颜色映射（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 通道的数据会被作为视觉数据绘制到最后的可视化中，但是不会去生成比例尺。
(() => {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();})();
(() => {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();})();
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的色板。
离散色板
连续色板
如果内置的色板不能满足你的要求，也可以试试自定义色板，以下是一个简单的例子，展示了如何自定义注册色板和使用。
(() => {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();})();
可以通过 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();})();