博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Highcharts 连续的堆积面积图
阅读量:6702 次
发布时间:2019-06-25

本文共 2272 字,大约阅读时间需要 7 分钟。

说明:设置两个柱形图间距为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 ''+ this.x +'
'+ this.series.name +': '+ this.y +'
'+ '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] }] });});

 

posted on
2016-01-27 16:56 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/volts0302/p/5163842.html

你可能感兴趣的文章
《面向模式的软件体系结构2-用于并发和网络化对象模式》读书笔记(13)--- 线程安全接口和双检查加锁优化...
查看>>
navicat 官方使用手册,中文版,快捷键大全
查看>>
结对开发:电梯调度(2)
查看>>
Java中的继承性特性
查看>>
Linux系统时间和硬件时间设置
查看>>
NOI2011 智能车比赛
查看>>
(旧)子数涵数·C语言——条件语句
查看>>
java_泛型(构造器)部分实例
查看>>
hdu 1161 Eddy's mistakes
查看>>
C++中关于cons和字符串t的一些注意事项
查看>>
[AX]AX2012 AIF(二):文档服务编程模型
查看>>
[AX]AX2012 SSRS报表使用Report Data Method
查看>>
Spring Boot 乐观锁加锁失败 - 集成AOP
查看>>
1-3-顺时针旋转矩阵
查看>>
可行性研究
查看>>
Linux文件查找命令find,xargs详述
查看>>
Spring WebFlux 响应式编程学习笔记(一)
查看>>
Dynamics CRM 2015 站点地图公告配置实体显示名称的变更
查看>>
java操作elasticsearch实现前缀查询、wildcard、fuzzy模糊查询、ids查询
查看>>
commons-fileupload、smartUpload和commons-net-ftp
查看>>