Color

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

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

设置数据无关的颜色，通过 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 通道的数据会被作为视觉数据绘制到最后的可视化中，但是不会去生成比例尺。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "scale": {
      "color": {
        "type": "identity"
      }
    },
    "colorField": "color",
    "yField": "sold",
    "xField": "genre",
    "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' },   ]
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

Range

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "scale": {
      "color": {
        "type": "ordinal",
        "range": ['#7593ed', '#95e3b0', '#6c7893', '#e7c450', '#7460eb']
      }
    },
    "axis": {
      "y": {
        "labelFormatter": ".0%"
      }
    },
    "colorField": "letter",
    "yField": "frequency",
    "xField": "letter",
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv"
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

Palette

Ant Design Charts 中可以通过设置 scale.palette 去指定色板。这个色板可以是离散的：

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "scale": {
      "color": {
        "palette": "tableau10"
      }
    },
    "axis": {
      "y": {
        "labelFormatter": ".0%"
      }
    },
    "colorField": "letter",
    "yField": "frequency",
    "xField": "letter",
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv"
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

同时也可以是连续的：

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "scale": {
      "color": {
        "palette": "rainbow"
      }
    },
    "colorField": "temp_max",
    "yField": (d) => new Date(d.date).getUTCMonth(),
    "xField": (d) => new Date(d.date).getUTCDate(),
    "transform": [
      {
        "type": "group",
        "color": "max"
      }
    ],
    "data": {
      "type": "fetch",
      "value": "https://assets.antv.antgroup.com/g2/seattle-weather.json"
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

内置色板

Ant Design Charts 提供了一些内置的色板，可以直接使用，并支持 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

自定义色板

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

import { Column, G2 } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

function customPalette() {
  return ['#FFB3BA', '#98FF98', '#89CFF0', '#FFF9B1', '#D1A3FF'];
}

G2.register('palette.custom', customPalette);

const Demo = () => {
  const config ={
    "scale": {
      "color": {
        "palette": "custom"
      }
    },
    "axis": {
      "y": {
        "labelFormatter": ".0%"
      }
    },
    "colorField": "letter",
    "yField": "frequency",
    "xField": "letter",
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv"
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

Relations

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

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

样式

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

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "style": {
      "fill": (datum, index, data) => {     const { frequency } = datum;     if (frequency > 0.1) return '#3376cd';     if (frequency > 0.05) return '#f4bb51';     return '#b43a29';   }
    },
    "yField": "frequency",
    "xField": "letter",
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv"
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);