1.1 应用场景

面积图是强调数量随时间而变化的程度，可用于引起人们对总值趋势的注意的图形。

利用面积统计图，可以将排列在工作表的列或行中的数据绘制到面积图中。通过显示所绘制的值的总和，面积图还可以显示部分与整体的关系。

1.2 图表特点

优点：能很好的展现沿某个维度的变化趋势，能比较多组数据在同一个维度上的趋势，适合展现较大数据集。

2.1 类型

以单元格元素或悬浮元素插入面积图后，可在右边属性面板的类型设置项下，自由选择4种子类型，如下图所示：

2.1.1 面积图

普通的面积图，显示各种数值随时间或类别变化的趋势线。

2.1.2 堆积面积图

堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量，显示每个数值所占大小随时间或类别变化的趋势线，可强调某个类别交于系列轴上的数值的趋势线。

堆叠面积图和面积图的区别在于：堆叠面积图每个数据系列的起点都是基于前一个数据系列绘制的，也就是每度量一行就要填满行与行之间的区域。如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。

2.1.3 百分比堆积面积图

适用于显示每个数值所占百分比随时间或类别变化的趋势线。可强调每个系列的比例趋势线。

堆积面积图与百分比堆积面积图的区别在于：堆积面积图直接使用原始值堆叠，显示整个过程如何变化。而百分比堆积面积图则着重于显示不同部分之间的关系如何随时间而变化。其中累积的总数不重要，重要的是显示出类别分布在整体中的作用。

2.1.4 自定义面积图

用户可以自定义面积图的堆积和坐标轴的属性。

2.2 数据

面积图数据绑定的详细介绍可以参见文档：图表数据

2.3 样式

面积图样式设计的详细介绍可以参见文档：图表样式

1）渐变配色

2020-07-06 及之后版本 JAR 包面积图新增渐变风格配色，可选择是否开启，如下图所示：

2）标签布局

2020-07-06 及之后版本的 JAR 包，折线图标签布局有如下变动：

位置：新增自动选项，当选择自动时，系统自动调整标签位置。

重叠调整：当多个标签重叠在一起时，可以开启该功能，系统自动错开标签位置。

• 标签重叠在一起：

• 开启重叠调整：

3）坐标轴自定义

自定义面积图属性面板的样式>坐标轴下新增添加坐标轴按钮，用户可新增其他的X、Y轴，并对新坐标的属性进行设置。

4）堆积自定义

新增的坐标轴需要对应到具体系列的值，样式>系列下新增堆积和坐标轴功能，用户可自定义坐标轴的堆积属性和系列对应关系。

2.4 特效

面积图特效设置的详细介绍可以参见文档：图表特效

3.1 报表设计

3.1.1 数据准备

新建数据集 ds1，数据库查询语句如下：

select 类别名称,库存量,订购量,再订购量 from 产品,类别

where 产品.类别ID=类别.类别ID and 类别名称!="日用品" 

order by 类别名称

3.1.2 组件设计

将4个面积图拖拽到 body 组件中，分别设置成4个不同的子类型，调整它们之间的位置关系，如下图所示：

3.1.3 数据绑定

4个子类型的数据绑定方法是一样的，如下图所示：

3.1.4 样式设计

除了自定义面积图，其他三种面积图的样式只需要改个标题，其余默认设置即可。

下面单独介绍自定义面积图的样式设计：

1）选择自定义面积图时，默认会新增一个显示在图表上方的Y轴2，沿用这个默认设置，如下图所示：

2）如下图步骤设置，让Y轴对应系列2的值，让Y轴2对应系列1的值，不设置堆积效果。

3.2 效果预览

1）PC 端

保存报表，点击表单预览，效果如下图所示：

2）移动端

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\面积图.frm

点击下载模板：面积图.frm