说明:设置两个柱形图间距为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 连续的堆积面积图的更多相关文章

  1. 第四篇:R语言数据可视化之折线图、堆积图、堆积面积图

    折线图简介 折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图 本例选用如下测试数据集: 绘制方法是首先 ...

  2. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  3. Python使用Plotly绘图工具,绘制面积图

    今天我们来讲一下如何使用Python使用Plotly绘图工具,绘制面积图 绘制面积图与绘制散点图和折线图的画法类似,使用plotly graph_objs 中的Scatter函数,不同之处在于面积图对 ...

  4. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

  5. 初探ggplot2 geom__制作面积图

        大家大概都对如下信息图并不陌生,该图用100%堆积面积图的方式来表现不同时期不同国家人数所占的比例.这是一种很有意思的表达方式,而面积图也是很常用的数据图表,现在让我们一起来看看如何在R里用g ...

  6. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  7. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  8. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  9. javascript曲线图和面积图Line & Area chart控件功能及下载

    Line & Area chart 控件是一款新型的.可用性极强的曲线图和面积图产品.一个您网站的访问者可以放大他感兴趣的一段区域,打开和关闭数值气球,并可显示和隐藏图表.您能创建简单.堆积. ...

随机推荐

  1. jquery判断checkbox是否选中及改变checkbox状态[转]

    jquery判断checked的三种方法: .attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop('c ...

  2. MSSQL死锁产生原因及解决方法

    一.    什么是死锁 死锁是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等的进 ...

  3. Python标准库04 文件管理 (部分os包,shutil包)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在操作系统下,用户可以通过操作系统的命令来管理文件,参考linux文件管理相关命令 ...

  4. dedecms v5.7 sp1 给栏目添加缩略图功能

    一.给数据库添加字段typeimg 如图:   二 . 修改 dede/catalog_add.php 找到 $in_query = "INSERT INTO `#@__arctype`(r ...

  5. go mobile 得生命周期事件

    生命周期事件,就是状态从一个阶段切换成另外一个状态时触发的事件.所以我们可以看到 lifecycle.Event 的定义如下:   生命周期一共有下面四个阶段: lifecycle.StageDead ...

  6. 类似 go get –u 的命令行参数实现

    我们可能需要类似 go get –u -. 这样的方式来实现我们的应用,这时候我们无法简单地使用 flag.Parse 了,而是要用 FlagSet 了, 使用例子如下:   package main ...

  7. Eclispe 安装PropertiesEditor插件

    一个不错的编写properties文件的Eclipse插件(plugin),有了它我们在编辑一些简体中文.繁体中文等Unicode文本时,就不必再使用native2ascii编码了.您可以通过Ecli ...

  8. 查看用户的SQL执行历史

    程序开发少不来SQL,基本都是基于SQL开发,程序仅仅起一个流程控制的作用.但是数据库本身存在许多内置的视图或者内置的表,如果打算研究SQL执行的效率已经SQL执行的历史记录,通过这些视图可以知道. ...

  9. UDKtoUE4Tool-UDKUE3资源移植UE4工具

    UDKtoUE4Tool UDKtoUE4Tool 是一个把UE3/UDK资源包(T3D格式)转换成UE4(T3D格式)的工具.作者Matt3D使用C#实现,未来考虑发布到Unreal Marketp ...

  10. 【LeetCode】18. 4Sum

    题目: 思路:这题和15题很像,外层再加一个循环稍作修改即可 public class Solution { public List<List<Integer>> fourSu ...