功能描述:

柱形图和面积图可以设置成堆叠的形式,堆叠后同一个分类下的数据不再是水平依次排列而是依次从上到下堆叠在一起。

堆叠有两种形式:普通堆叠是按照数值大小依次堆叠,百分比堆叠是按照数值所占百分比进行堆叠。

通过指定柱形图或面积图的stacking属性即可是图形堆叠,示例代码如下:

Highcharts 堆叠图形式的转换_数据

normal普通数值堆叠 | percent百分比堆叠

示例一:

下图是对柱形图(面积图则需要将column改为area)进行百分比堆叠

Highcharts 堆叠图形式的转换_示例代码_02

效果图:

Highcharts 堆叠图形式的转换_数据_03

示例二:

下图是对柱形图普通数值堆叠

Highcharts 堆叠图形式的转换_sed_04

效果图:

Highcharts 堆叠图形式的转换_示例代码_05

堆叠图相关配置

1、堆叠顺序:

默认情况下图形是根据数据列的属性依次从上到下堆叠的,可以设置堆叠反转(reversedStacks)属性可以将这个顺序调换,即从下到上堆叠,下面是具体的实例:

//Y轴
yAxis: {
	min: 0,
	reversedStacks:true,
	//堆叠翻转(从下到上)
	title: {
		text: '水果消费总量'
	}
   },

Highcharts 堆叠图形式的转换_数据_06

2、分组堆叠

通过设置数据列的stack属性可以是不同的数据列根据相同的 stack 值进行分组堆叠。

3、堆叠数据标签

堆叠数据标签(yAxis.stackLabels)指的是显示堆叠总值的数据标签。