> For the complete documentation index, see [llms.txt](https://reee-visual.gitbook.io/ray-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reee-visual.gitbook.io/ray-design/dui-die-tu.md).

# 堆叠图

柱状堆叠图（Stacked Column Chart），又称堆叠柱形图，是一种用来分解整体、比较各部分的图。

与柱状图类似，堆叠柱状图常被用于比较不同类别的数值。而且，它的每一类数值内部，又被划分为多个子类别，这些子类别一般用不同的颜色来指代。

 堆叠图分可为：基础堆叠图、条形堆叠图、折线堆叠图、百分比堆叠图、面积堆叠图。

### 一、堆叠图图解

![](/files/-MkkN_PoM5PwCnMHcrPj)

### 二、基本属性

![](/files/-MkkNlmVWnVwAVZxF7ua)

### 三、数据结构

> 第一行显示类别，类别的数量决定柱子的数量； 
>
> 第一列显示系列，系列的数量决定单个柱子堆叠层数；
>
> 绿色区域为数值区，数值的大小决定堆叠层高度。

![](/files/-MkkO9Ogh28up_FaSM-Z)

### 四、适用场景

当需要进行数据总份额及单份额对比的时，使用堆叠图最合适。

#### 4.1 柱状堆叠图与折线堆叠图

当数据单份额对比需求高于总份额对比需求时，可选折线堆叠图。用户可更快的了解图表所反映信息。

![](/files/-MkkOdpJl8nKjT4l7YMW)

#### 4.2 百分比柱状堆叠图与百分比面积堆叠图

当总系列对比需求较高时，可选百分比面积堆叠图。

![](/files/-MkkP-eZmTTjZp0zZvwH)

### 五、不适用场景

#### 5.1 堆叠层数过多

堆叠层数不易超过9层（7±2法则）。当堆叠层数过多时，很难从图表中快速获取相应信息。

![](/files/-MkkPN4GuHozHISBEoS4)

#### 5.2 X轴标签过长

当X轴标签过长时，不宜使用柱状堆叠图。使用条形堆叠图效果更佳。

![](/files/-MkkPkcI1YNmHwjRSPpW)

### 六、制作方法

1、使用RayCharts生成堆叠图，打开下方网址；

```
https://raycharts.raykite.com
```

2、左侧图表区选择堆叠图；

![](/files/-MkkR0LlpJLIRIv_R6HI)

3、右侧编辑区自定义样式；

![](/files/-MkjcZHqbULnBXxEq8nr)

4、生成数据或者手动录入；

![](/files/-MkjboXYFK8llfnvKoXE)

5、预览生成效果。

![](/files/-MkkRI3uVygbMjT7kFmF)

### 七、设计开眼

* [统计各国国旗颜色与形状占比的项目。](https://flagstories.co/)
* [2007-2017年的Billboard榜单进行了可视化](https://www.behance.net/gallery/69971933/Billboard-Music-Evolution-Data-Visualisation)

### 八、更多学习资源

* [使用堆叠图需要注意什么？](https://blog.datawrapper.de/stacked-column-charts/)