Highcharts 堆叠图形式的转换
  DhOXZ4KmG8JI 2023年11月24日 21 0

功能描述:

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

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

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

Highcharts 堆叠图形式的转换_sed

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

示例一:

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

Highcharts 堆叠图形式的转换_sed_02

效果图:

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

示例二:

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

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

效果图:

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

堆叠图相关配置

1、堆叠顺序:

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

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

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

2、分组堆叠

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

3、堆叠数据标签

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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月24日 0

暂无评论

推荐阅读
DhOXZ4KmG8JI