# 数据可视化设计指南
## 图表色板
### 分类色板 ｜Categorical palettes
分类色板，用于描述分类数据，通常一个颜色代表一个值以区分不同类型，图表项间完全独立，没有逻辑上的顺序或关联的数据情况，通常用于多组柱形图、多组折线图或饼图等场景。
分类色板主要通过各种颜色视觉区别做数据点之间的区分，我们建议按照下方所示顺序使用颜色。（当类别超过 14 个颜色的场景时，建议进行循环取色。)
以下为 DS 默认分类色板：
---
**取色示例：**
只有一个类别：
取分类色板第一个颜色应用到每个数据上。 | 显示多个类别：
按照预定顺序自动从分类色板取色应用到每个类别中
---|---
 | 
**注意事项**：
### 顺序色板 ｜ Sequential palettes
顺序色板，使用同一（单色）或邻近色相（多色），通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如一个国家或地区的新增人口数对比、风险等级变化。
**单色**
单色顺序色板适用于存在关系或趋势的图表，例如漏斗图、色块图等。
以下为 DS 部分默认顺序色板示例：
---
**多色**
通常是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等。
> 例如：“小于 -10℃”、“-10℃ - 0℃”、“0℃”、“0℃ - 10℃”、“大于 10℃”
**功能色板 ｜ function palettes**
功能颜色用于反映状态。通常红色代表危险或错误，橙色代表严重警告，黄色代表一般警告，绿色代表正常或成功。
function 色板 | 使用场景
---|---
 | 元素：
 
文字：（请重视颜色在不同文化中可能具有不同的含义，仅作示例）
 
## 图表构成
### 矩形图表
大部分可视化图表都是矩形图，在 X 轴、Y 轴表示两个维度，通常由模块 header、轴标题、图例等内容组成。
### 圆形图表
常见的圆形图表有饼图、环形图、雷达等。
- **图例显示：** 如果图表仅显示一个数据类别，并且场景中有其他显示类别标签的场景下，将图例隐藏显示
- **图例位置：**
- 默认情况下，飞书内桌面端图例位于图表底部水平居中对齐。（但根据页面布局和场景，可以选择将图例放在图表的上/右等位置）
- 移动端建议将图例放置于图表上方，保障用户能清晰查看图例
- **图例纹理：** 默认情况下使用颜色区分数据属性，（色盲、色弱等）视障场景下可以通过纹理代替/补充颜色区分
- **图例过多：** 当前 Vchart 预置方式体验一般，优先以业务内探索统一方案后 UD 跟进研发
## 高频图表的选择&应用
### 类型总览
从图表展示意图角度，可以将常见数据图表归纳为以下 7 类。
并不是说“比较”目标类型图表不能表现“趋势”，只是基于图表类型最大的特性优势进行分布，例如折线图也可以比较，但相比而言趋势更加明显。
图表目标 | 图表选型
---|---
**比较**:
使用图形的长、宽、位置、面积、角度、颜色等来比较数值大小。 | 
**趋势**:
通过图形位置在区域上的连续分布，来展示变化趋势 | 
**流程**:
显示固定流程间的流程流转或数据转化 | 
**占比**:
通过分总对比表示分类数据的占比 | 
**分布**:
数据的分布情况 | 
**排名** | 
**关系** | 
### 图表详细
同时，我们收集各业务高频使用图表类型，并对以下 8 类高频图表定义、使用场景、类型细节进行归纳分析。
**折线图 LineChart ｜ 趋势**
**定义：**
一系列的数据点进行连接，用于描述随时间或有序类别变化的趋势。（通过点在 Y 轴位置对比数据值）
**色板使用：**
折线图通常采用「分类色板」
**使用场景：**
不适用：分类过多的场景（超过 5 个），不建议选用折线图
**类型说明：**
类型 | 使用场景 | 示例
---|---|---
**基础折线图**
Basic | 直线段将数据点连接，关注点数据（仅节点为真实数据，连线间任意点无实际意义），适用于简单的数据集。
**优势：清晰趋势展示、空间占用较少，方便比较** | 
**平滑折线图**
（曲线）
Basic | 曲线段将数据点连接，关注线数据（线上任意点都是真实数据），适用于对趋势平滑度关注的场景。
**优势：平滑过渡、高精度预测/观察、显示周期性数据** | 
**阶梯图**
Step | 以固定间隔绘制数据，在数据点之间形成一系列阶梯，凸显数据的阶段性变化。
**优势：数据阶段性变化明显** | 
**柱状图 ColumnChart｜比较**
**定义：**
以长方形的长度或高度为变量描述数据值，用于描述分类数据之间的对比。分为水平方向（条形图）、垂直方向（柱形图）
**使用场景：**
适用：应用于明确/少量的分类数据对比
不适用：分类过多或表示趋势场景
**色板使用：**
默认采用「分类色板」。也在分组、堆叠字段有一定内在顺序逻辑时使用「顺序色板」。
类型-子类型 | 使用场景 | 示例
---|---|---
**柱状图 - 基础柱状图**
Column - Basic | 垂直的柱子显示类别间的数据比较。一个轴是分类维度，一个轴是对应数值。
**优势：对比不同分类的数据大小** | 
**柱状图 - 分组图**
Column - Grouped | 将多组数据集彼此并排显示，进行不同类别的数据对比。
**优势：对比同一分组内不同分类数据大小。对比不同分组相同分类大小，但无法对比各分组总量** | 
**柱状图 - 堆叠柱状图**
Column - Stacked | - **一般堆叠**
单个柱状上各层的值分别代表不同的数据大小，单柱高度代表分组数据总和。
- **百分比堆叠**
柱状各层代表该类别数据占分组总体数据的百分比。
**优势：方便对比总量，但不适合对比不同分类下相同维度数据** | 一般堆叠
百分比堆叠
**条形图**
Bar | 避免标签过长拥挤查看困难时使用。（条形图也有分组、堆叠场景，不做赘述）
1.分类可视化多用条形图
2.时间序列多用柱状图
**优势：清晰对比数据的同时，为标签提供更多空间** | 
**饼/环图 PieChart｜构成占比**
**定义：**
通过扇区弧度大小为变量对比不同分类的占比情况，显示某一份额与总额间的关系用于描述分类数据之间的对比。饼图数据分类不宜过多（少于 9 个），避免饼图过于复杂，可读性受影响。
**使用场景：**
适用：分类明确且查看占比场景
不适用：分类过多、分类数据量差别小
**色板使用：**
默认采用「分类色板」
**类型说明：**
类型 | 使用场景 | 示例
---|---|---
**饼图**
pie | 通过弧度大小对比各种分类占比情况。
**优势：方便比较各分类大小占比** | 
**环图**
donuts | 与饼图类似，将中间区域挖镂空。
**优势：中心空间可利用、对比饼图更美观** | 
**嵌套图** | 饼图和环图组合，展示数据的细分构成。
**优势：清晰查看二级分类占比** | 
饼/环图细节建议：
- 为避免饼/环图某些色板色彩下外部标签文字颜色色彩弱，可读性低，将外部标签文字颜色调整为统一的灰色。
- 同时，考虑到某些场景下扇块接近，文字和线条都灰色时用户关联识别差，所以连接线条颜色依旧保持为色板颜色。
**漏斗图 FunnelChart ｜流程转化**
**定义：**
形似漏斗，用于单向流程环节间中数据指标的转化分析。漏斗图可以通过在垂直或水平方向上的每一层的大小差异，反映出具流程节点之间的变化情况（有逻辑上的顺序关系）。
**使用场景：**
适用：阶段/流程转化，分类数明确
不适用：没有逻辑顺序的数据对比或分类过多（超过 12 条数据）
**色板使用：**
默认使用「顺序色板」
**类型说明：**
类型 | 使用场景 | 示例
---|---|---
**基础漏斗（梯形）**
Basic | 倒梯形面积表示分类与上一个分类间的差异，漏斗从上到下。 | 
**转化漏斗（矩形）**
Conversion | 通过弧度大小对比各种分类占比情况。
**优势：对比基础漏斗，展示逐层的转化率数据** | 
**散点图 ScatterChart ｜分布**
**定义：**
将所有数据以点的形式展现在直角坐标系上，用来显示推测变量之间相关性。如果存在相关性，那么大部分数据点会相对密集并以某种趋势呈现。
散点图经常与回归线（最准确贯穿所有点线）结合使用。
**使用场景：**
X 轴、Y 轴都对应数据
适用：数据量大，看分布规律
不适用：数据量少（结果会存在偶然性）
**色板使用：**
默认使用「分类色板」
**类型说明：**
类型 | 使用场景 | 示例
---|---|---
**基础**
Basic | 所有数据通过点平铺在坐标系中，两个连续字段分别映射到 X 轴、Y 轴
**优势：展示数据间的关联关系**
数据示例：
 | 
**雷达图 RadarChart ｜比较**
**定义：**
展示多维度（4 个以上）的数据，每个维度数据分别对应一个相同圆心的坐标轴，将坐标轴上的点连接起来形成雷达图，多用于产品性能对比。
**使用场景：**
适用：多个维度、数据对比
不适用：维度过多
**色板使用：**
默认使用「顺序色板」
**类型说明：**
类型 | 使用场景 | 示例
---|---|---
**基础**
Basic | 以圆心为坐标轴，展示多个维度的数据、通过连线进行对比
**优势：直观展示多维数据集**
数据示例：
 | 
**面积图 AreaChart｜趋势**
**定义：**
在折线图基础上，通过透明颜色、阴影等方式强调轴和线之间的区域（也叫区域图）。
折线所有类型都支持面积图，（基础面积图）图例个数不超过 3 个，通常用在股票、收益对比。
**使用场景：**
适用：时间维度变化、多组值趋势分析
不适用：不同分类间的数据比较
**色板使用：**
默认使用「顺序色板」
**类型说明：**
| 使用场景 | 示例
---|---|---
**基础**（折线、曲线、阶梯）
Basic | 所有数据都从相同零轴开始。
**优势：直观展示趋势数据**
数据示例：
 | 
**堆叠** | 每个数据集起点不同，基于前一个数据集值为起点。
**优势：不会出现数据序列遮挡，并且可以展示总量分量**
数据示例：
 | 
**组合图 CombineChart**
**定义：**
顾名思义，使用多种图表组合更全面的展示数据多个方面。最常见的是柱状&折线图表组合、折线&阶梯图表、散点图&回归线组合。
组合图中常因 Y 轴指标不同，使用左右双 Y 轴。
**使用场景：**
适用：多个角度数据展示、分析
不适用：单一分类数据、图表类型过多，信息过载
**色板使用：**
基于图表类型选择
**类型说明：**
类型 | 使用场景 | 示例
---|---|---
**折柱混合图** | 柱状图和折线图组合使用，（柱往往代表具体数值，折线代表占比/比例）
**优势：直观展示数据分布和趋势**
数据示例：
 | 
## 图表适配
### 元素适配
**元素信息优先级**
在有限的图表容器空间中，应将非必要元素转化或隐藏，以保留重要的图形元素并适应空间。建议的优先级顺序为：图形元素＞图例＞坐标轴＞网格线。（标题和操作栏遵循响应式规则）
**坐标轴适配**
图表容器变化时，坐标标签可能过长，导致重叠。省略标签会损失信息。需要根据具体情况，选择合适的处理规则：
- 文本标签常见处理方式：省略、换行、旋转（旋转场景下标签难以阅读，请小心使用）。
- 连续数据场景处理方式：抽样、转化等。
- 迷你图处理方式：隐藏（迷你图表以微型的形式，简洁的呈现一系列值的趋势）
横轴抽样、纵轴转化（基于数据场景选择合适的轴线、标签个数，不要影响用户阅读数据）
旋转场景易出现标签高度超过图表容器空间的场景，信息展示不合理。所以我们建议旋转场景下，高度超出图表容器空间 30% 时开始自动省略。
**Label 轴标签**
- 图表数值 Label 个数过多：隐藏 Label 显示，通过 Tooltips 展示
 | 
---|---
**正确**：
隐藏 Label 显示，hover 显示对应内容。 | **避免**：
Label 个数过多，展示出来影响用户信息获取效率。
**提示说明卡片**
在桌面端图表中，提示说明通常是通过鼠标悬停时触发的气泡卡片来呈现的。但在移动端，为了保证信息展示的效果和内容的稳定性，我们建议将提示说明卡片固定在图表上方，并在用户手指按压触摸到图表时显示相应的数值（非桌面端 hover）。
桌面端 | 移动端
---|---
 | 
### 极值适配
**分组聚合空值场景**
以柱状图分组场景为例，数据为空值时自适应逻辑，调整图表对齐，保障数据获取效率。
 | 
---|---
**正确：**
对数据为空的项进行处理，采用分组内居中形式，保障图表规整。 | **避免：**
数据为空无处理，分组各项延续有值时形式，图表混乱。
**缩略轴增加信息展示区分**
在数据过多时，可增加取值范围的缩略轴组件。这样既能限制数据的展示范围，实现数据量的可控显示，又能突出数据信息的区分。
 | 
---|---
**正确：**
增加缩略轴，数据显示可控，突出数据查看/对比 | **避免：**
有限空间下全量展示，信息获取效率低，底部标签重叠