说明:设置两个柱形图间距为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. SqlCommand.ExecuteNonQuery()执行查询返回值的问题

    SqlCommand.ExecuteNonQuery 方法对连接执行 Transact-SQL 语句并返回受影响的行数.但是有个前提:必须是 UPDATE.INSERT 和 DELETE 语句.而对于 ...

  2. DedeTag Engine Create File False提示的种种原因及解决方法

    DedeTag Engine Create File False提示的种种原因及解决方法 第一种情况:站点.文件夹权限不足造成无法建立文件 这种情况的出现,一方面可能是Apache设置的读写权限较严格 ...

  3. 使用t-sql从身份证号中提取生日

    使用t-sql从身份证号中提取生日,一下是转换16位身份证号的例子,仅供参考. create function getDateFromID( ) ) returns datetime as begin ...

  4. MYSQL C API : mysql_real_query()

    enum enum_field_types { MYSQL_TYPE_DECIMAL, MYSQL_TYPE_TINY, MYSQL_TYPE_SHORT, MYSQL_TYPE_LONG, MYSQ ...

  5. struts (二)

    1.运行流程 client --->tomcat  ---> webapp  -->web.xml --->filter -->struts.xml ---->na ...

  6. [ActionScript 3.0] AS3动态改变注册点

    package { import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import fl ...

  7. 2013 ACM 通化邀请赛 A. Tutor

    A. Tutor Description Lilin was a student of Tonghua Normal University. She is studying at University ...

  8. No data in the view dba_hist_undostat (文档 ID 1558157.1)

    APPLIES TO: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 11.2.0.3 [Release 10.2 to 11. ...

  9. 部署windows服务

    (1) cd C:\Windows\Microsoft.NET\Framework64\v4.0.30319(2) InstallUtil.exe D:\SVN\zhongchao\开发\WeiXin ...

  10. 剑指Offer:面试题7——用两个栈实现队列(java实现)

    题目描述:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 首先定义两个栈 Stack<Integer> stack1 = new Stack<I ...