面积图及面积范围图

面积图包括普通的面积图（area）及面积范围图（arearange），根据面积连接线的不同，又可以分为直线面积图（area、arearange）和曲线面积图（areaspline 及 areasplinerange）。

一、面积图

图4-3 Highcharts 面积图

面积图相关的配置参考 API 文档：

• 面积图配置：针对当前数据列有效
• 面积数据列配置 ：针对当前页面的所有面积数据列有效

1、曲线面积图

曲线面积图和面积图一样，只不过连线的方式是曲线，而面积图的连线方式是直线。

图4-4 Highcharts 曲线面积图

曲线面积图相关的配置参考 API 文档：

• 曲线面积图配置：针对当前数据列有效
• 曲线面积数据列配置 ：针对当前页面的所有曲线面积数据列有效

下面列举关于面积图的常用设置及特性

2、面积填充颜色

在面积图中，有三个配置决定了面积的填充颜色，分别是：填充颜色、填充透明度 及当前数据列的颜色配置。

默认的填充颜色是当前数据列的颜色加上 0.75 （填充透明度默认值）的透明度。

下面是一个具体的使用示例：

3、阶梯型面积图

同直线图一样，面积图也可以实现阶梯形，只需要配置 step 属性即可，下面是一个示例：

二、面积范围图

图4-5 Highcharts 面积范围图

面积范围图相关的配置参考 API 文档：

• 面积范围图配置：针对当前数据列有效
• 面积范围数据列配置 ：针对当前页面的所有面积范围数据列有效

面积范围图是表示范围区间的面积图，其 Y 值包含两个值，表示范围的最小值和最大值。

根据连接线的不同，面积图又分为面积范围图和曲线面积范围图。

图4-6 Highcharts 曲线面积范围图

曲线面积范围图相关的配置参考 API 文档：

• 曲线面积范围图配置：针对当前数据列有效
• 曲线面积范围数据列配置 ：针对当前页面的所有曲线面积范围数据列有效

关于面积图的详细信息我们将在后面的教程 “范围图” 中说明。