Highcharts 连续的堆积面积图
说明:设置两个柱形图间距为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]
}]
});
});
Highcharts 连续的堆积面积图的更多相关文章
- 第四篇:R语言数据可视化之折线图、堆积图、堆积面积图
折线图简介 折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图 本例选用如下测试数据集: 绘制方法是首先 ...
- HighCharts之2D堆面积图
HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...
- Python使用Plotly绘图工具,绘制面积图
今天我们来讲一下如何使用Python使用Plotly绘图工具,绘制面积图 绘制面积图与绘制散点图和折线图的画法类似,使用plotly graph_objs 中的Scatter函数,不同之处在于面积图对 ...
- 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...
- 初探ggplot2 geom__制作面积图
大家大概都对如下信息图并不陌生,该图用100%堆积面积图的方式来表现不同时期不同国家人数所占的比例.这是一种很有意思的表达方式,而面积图也是很常用的数据图表,现在让我们一起来看看如何在R里用g ...
- HighCharts之2D数值带有百分数的面积图
HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...
- HighCharts之2D含有负值的面积图
HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...
- HighCharts之2D面积图
HighCharts之2D面积图 1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...
- javascript曲线图和面积图Line & Area chart控件功能及下载
Line & Area chart 控件是一款新型的.可用性极强的曲线图和面积图产品.一个您网站的访问者可以放大他感兴趣的一段区域,打开和关闭数值气球,并可显示和隐藏图表.您能创建简单.堆积. ...
随机推荐
- Spring中bean的配置
先从IOC说起,这个概念其实是从我们平常new一个对象的对立面来说的,我们平常使用对象的时候,一般都是直接使用关键字类new一个对象,那这样有什么坏处呢?其实很显然的,使用new那么就表示当前模块已经 ...
- STM32中断控制及优先级设置
M3用8bits而STM32用高四位来表示抢占和子优先级:bit=1表示抢占:bit=0表示非抢占即子优先级:所以共有5中方案分组: 分组 Bit7 Bit6 Bit5 Bit4 说明: 第0组 ...
- 用友UAP
1, 用友UAP 用友集团UAP中心成立于2013年1月1日,隶属于用友集团,旨在为全球大中型企业和公共组织提供计算平台,并打造完整.统一的软件产业链生态系统,以先进的平台.技术和专业的服务成为客户信 ...
- mysql事务与mysql储存引擎
事务概念及存储引擎 1.0 为何要事务? 先来看一个场景,银行转账汇款: 李彦宏和周鸿祎天天打架,现在让李彦宏给周鸿祎转款1000 元 设计如下表 account表 编号(id)用户名(user)金额 ...
- mysql基础语法之(全文索引)
1.概要 InnoDB引擎对FULLTEXT索引的支持是MySQL5.6新引入的特性,之前只有MyISAM引擎支持FULLTEXT索引.对于FULLTEXT索引的内容可以使用MATCH()…AGAIN ...
- lamp.phpstudy.net
phpStudy phpStudy » PHP教程 » phpStudy for Linux (lnmp+lamp一键安装包) phpStudy for Linux (lnmp+lamp一键安装包) ...
- (英文版)使用Visual Studio 2015 编写 MASM 汇编程序!
原文地址:http://kipirvine.com/asm/gettingStartedVS2015/index.htm#CreatingProject Getting Started with MA ...
- ruby字符串学习笔记5
1获取字符串某部分 s = "My kingdom for a string!" s.slice(3,7) # kingdom s[3,7] # kingdom s[/.ing/] ...
- 基于lucene实现自己的推荐引擎
基于lucene实现自己的推荐引擎 推荐常用算法之-基于内容的推荐 推荐算法
- [HDU 3535] AreYouBusy (动态规划 混合背包 值得做很多遍)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3535 题意:有n个任务集合,需要在T个时间单位内完成.每个任务集合有属性,属性为0的代表至少要完成1个 ...