---
order: 1
---
# 颜色

颜色标记是[条件样式](./README.md)的一种，可以使[图形控件](../../../components/chart/README.md)看起来颜色更加丰富或者使用颜色来凸显出某些数据。颜色中有多种颜色效果，如[颜色填充](#colorfill)、[色阶](#colorscale)、[色板](#colorboard)等。本文以[柱形图](../../../components/chart/column-chart.md)为例，介绍如何给图形控件设置颜色标记。

| 颜色填充 | 色阶 | 色板 |
| -------- | -------- | -------- |
|![颜色](./images/2020-07-28-17-28-48.png)|![色阶](./images/2020-07-28-17-29-58.png)|![色板](./images/2020-07-28-17-30-50.png)|

## 使用方法{#start}

在**属性栏**>**柱形图**>**字段**>**颜色**，设置当前系列的颜色标记，或者将字段拖到**颜色**中即可。颜色标记有6种类型：

- [自动](#automatic)
- [无填充](#null)
- [颜色填充](#colorfill)
- [色阶](#colorscale)
- [色板](#colorboard)
- [图片填充](#imagefill)

### 自动{#automatic}

**自动**填充根据当前**文件**设置的主题对柱形图柱子进行颜色填充。

![自动](./images/2024-01-18-00-00-01.png)

### 无填充{#null}

**无填充**不进行填充，无显示效果。

![无填充](./images/2024-01-18-17-00-00.png)

### 颜色填充{#colorfill}

同一个系列的样式一般都是同种颜色进行填充，如两个系列柱形图中，零售总金额使用蓝色柱子进行填充，交易总金额使用橙色柱子进行填充。若需要修改柱子的颜色，可以通过修改颜色来设置柱子的颜色。**柱形图**点击字段下的**颜色**>**颜色填充**，在取色器中选取颜色即可。

![颜色填充](./images/2020-07-30-23-06-42.png)

### 色阶{#colorscale}

- **色阶**
  - 原理：根据数据区间范围大小，进行色阶填充
  - 适用场景：**连续**效果，指标数据，例如销售数量越高颜色越深，销售数量越低颜色越浅

色阶标记可以让图形控件展现出渐变的颜色效果，我们可以将作为依据的度量拖拽到**颜色**上，此时系统会根据每个系列的度量值大小来自动分配色阶颜色。

![色阶](./images/2020-07-30-23-27-28.png)

点击**颜色**按钮，弹出色阶标记对话框，可设置最大最小值点及中间值点的颜色，从而通过这三点形成一条色阶，点击**确定**后即可将当前的颜色设置作用于控件上。

![色阶标记](./images/2019-11-24-16-46-55.png)

- **倒序**：勾选后，将最小最大点的颜色倒序
- **重置**：点击后将恢复默认的色阶设置
- **应用**：点击后将按照当前的设置作用于控件上

### 色板{#colorboard}

- **色板**
  - 原理：通过将数据分类，然后使用色板根据数据分类结果进行颜色填充
  - 适用场景：**离散**效果，维度数据，不同的值使用不同的颜色，颜色会根据色板颜色进行填充。例如销售数量按照款式类别进行分类色板填充

色板是由一组不同的颜色组成的一条彩色图板，通过色板标记可以让图形显示出不同的颜色，如柱形图的每个柱子按照色板上的颜色实现柱子颜色各异，将度量字段**销售数量**拖到**颜色**，设置为**色板**，此时系统会根据色板上的颜色数量自动给每个柱子分配色板上的颜色，当指标数量多于色板上的颜色数量时，会按照色板颜色进行循环。

点击**颜色**按钮，弹出色板标记对话框，下拉选择主题色板，或者可以根据自定义设置特殊值的颜色。

![色板](./images/2020-08-03-16-25-17.png)

### 图片填充{#imagefill}

**图片填充**可以手动选择**图片来源**和**填充方式**对当前柱形图的柱子进行填充

![图片填充](./images/2024-01-18-17-05-00.png)

## 应用场景{#scene}

颜色标记不仅可以修改系列的颜色，实现系列中的颜色各异，还有更多的应用场景，如[堆积图](#stackingmap)、[地图颜色分段](#colorsegmentation)等。

### 堆积图{#stackingmap}

使用颜色标记，可以实现图形堆积，使用堆积图可以直观展示每个分组的值，以及反映出系列的总和。如使用[堆积柱形图](../../../components/chart/column-chart.md#stack)展示各大区的销售数量总和以及各价格档次的比重：

![堆积图](./images/2020-07-30-23-30-04.png)

**实现方式**

将维度字段如【价格档次】拖到颜色中即可，并可通过[色板](#colorboard)标注不同分组的颜色。

![堆积图](./images/2020-07-30-23-33-50.png)

### 地图颜色分段{#colorsegmentation}

在使用色板标记时，可设置特殊值自定义不同的颜色标注，如[疫情地图](https://demo.succbi.com/v5/bi/%E5%85%A8%E5%9B%BD%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E6%84%9F%E6%9F%93%E6%83%85%E5%86%B5%E5%88%86%E6%9E%90)中，根据确诊人数分段设置区块地图的颜色分段：

![地图颜色分段](./images/2020-08-03-16-10-23.png)

**实现方式**

1. 创建分段字段【确认人数分段】，可参考文档[添加分段字段](../../../../../data-process/transform/calc-section-field.md)

![创建分段](./images/2020-08-03-16-21-40.png)

1. 将字段【确诊人数分段】拖到地图的**区块图层**>**颜色**中，点击颜色根据分段名称设置颜色特殊值

![颜色分段](./images/2020-08-03-16-21-10.png)