> 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/mian-ji-tu.md).

# 面积图

面积图（Stacked Column Chart），又称区域图，原理与折线图类似。 

面积图描绘了时间序列关系。但与折线图不同的是，它们可以直观地表示交易量。信息在两个轴上绘制，使用由线段连接的数据点。轴和这条线之间的区域通常用颜色或阴影强调以提高可读性。大多数情况下，面积图比较两个或多个类别。 

面积图分可为：基础面积图、面积堆叠图、百分比面积堆叠图。

### 一、面积图图解

![](/files/-MkkUf_XYPM9_yKWxHuD)

### 二、基本属性

![](/files/-MkkUqBlEBhL2Z3YIgpN)

### 三、数据结构

> 第一行显示类别，类别数量决定面积转折点的数量； 
>
> 第一列显示系列，系列数量决定面积的数量； 
>
> 绿色区域为数值区，数值的大小决定面积转折点的高度。

![](/files/-Mkk_2-GifB8jCyYH0rT)

### 四、适用场景

面积图主要用于传达整体趋势，而不是个别值。对具有部分到整体关系的多个数据系列或累积值系列使用堆积面积图。 

此图表有三个主要变体，每个变体都有其最佳用途，具体取决于具体情况。

#### 4.1 基础面积图

![](/files/-MkkelOrs9E2MIw_LlwB)

适用于显示或比较随时间变化的数据场景。当有多组数据系列的情况下，选择折线图效果更佳。

#### 4.2 堆叠面积图

![](/files/-Mkkf3qgzy_KjUkGPyd0)

适用于部分与整体关系的数据场景，用于显示每个类别对累积总数的总和。

#### 4.3 百分比堆叠面积图

![](/files/-MkkfP8EVxeLx6p-DOex)

适用于单类别的分布与整体的占比，其中总和不重要的数据场景。

### 五、不适用场景

#### 5.1 各分类间不存递进关系

各分类之间不存在递进关系的数据场景不适合使用面积图。

例如：某季度各城市手机出货量（虚拟数据），北京、上海、广州、深圳、杭州和四川之间不存在递进关系，使用柱状图效果更佳。

![](/files/-MkkfiNi3ZARndwHk2tt)

### 六、制作方法

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

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

2、左侧图表区选择基础面积图、面积堆叠图或百分比堆叠面积图；

![](/files/-MkkR0LlpJLIRIv_R6HI)

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

![](/files/-MkjcZHqbULnBXxEq8nr)

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

![](/files/-MkjboXYFK8llfnvKoXE)

5、预览生成效果。

![](/files/-MkkRI3uVygbMjT7kFmF)

### 七、面积图图史

面积图是由 William Playfair 发明的。下图是第一个面积图“1786 年商业和政治地图集”。

![](/files/-MkkkSFPBX2Y9alNZ237)

横轴为年份（1686年-1784年），右边纵轴为单位（百万英镑），该图描述的是在该时间段里国债利息的变化，在战争时期，国债利息发生了明显的变化。

### 八、设计开眼

以下为具有代表性的设计案例，更多案例持续添加中。

* [Redwood City 码头潮汐预测的可视化](http://www.joanangdesign.com/tide-predictions)
* [25年中交通事故的统计数据的可视化](https://dribbble.com/shots/5471757-Data-Viz-Area-Chart)

### 九、更多学习资源

* [如何设计面积图](https://visage.co/data-visualization-101-area-charts/#main)