Highcharts 连续的堆积面积图
2024-04-04 04:41:53
说明：设置两个柱形图间距为0
Highcharts柱图，设置X轴各Column的间距
plotOption : {
column : {
// 设置每个柱自身的宽度
pointWidth :
// x轴每个点只用一个柱，则这个属性设置的是相邻的两个点的柱之间的间距。
// 如果x轴每个点有2个柱，则这个属性设置的是左侧点的右柱与右侧点的左柱之间的间距。
// 0.5的含义是，如果x轴长100px,则间距是100*0.5=50px
pointPadding : 0.5
// 如果x轴一个点有两个柱，则这个属性设置的是这两个柱的间距。
groupPadding : 0.5
}
}
如下设置：
pointPadding : 0,
groupPadding : 0,
borderWidth: 0,
效果图：
代码：
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding : 0,
groupPadding : 0,
borderWidth: 0,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 5, 5, null, null]
}, {
name: 'Jane',
data: [null, 2, 2, 2, null]
}, {
name: 'Joe',
data: [null, null, 4, 4, 4]
}]
});
});
最新文章
- LSOF 安装与使用
- springmvc下实现登录验证码功能
- Linux/CentOS 同步网络时间
- SQLServer触发器的使用
- python中关于list列表的增删查改操作
- Win7 IIS配置 applicationHost.config 错误：无法识别的特性“setProfileEnvironment” 解决方法
- 设计模式笔记之一：MVP架构模式入门（转）
- 这些年常用的WEB开发工具和技术, 学会一半你找工作没问题
- sqlplus 的安装和配置
- mybatis操作mysql的奇淫技巧总结（代码库）
- 安卓demo
- 计算机基础：计算机网络-chapter3
- 【Java】模拟Sping，实现其IOC和AOP核心（一）
- git clone的时候filename too long解决办法
- 1491. [NOI2007]社交网络【最短路计数】
- PPT文化
- Android 编辑框插入表情图片
- OO 抽象方法与虚方法的区别
- ue-edit设置显示函数列表
- php在linux中执行外部命令