zoukankan      html  css  js  c++  java
  • 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]
            }]
        });
    });    
  • 相关阅读:
    转载--重写、覆盖、重载、多态几个概念的区别分析
    笔试题--奇虎360-2013
    转载---数据挖掘十大经典算法
    Nginx的启动、停止与重启
    程序员的十种级别,看看你属于哪一种?
    C标签的用法
    eclipse修改代码后都需要clean的解决办法
    创建一个jFinal项目
    java redirect用法
    java获取访问者真实的IP地址
  • 原文地址:https://www.cnblogs.com/volts0302/p/5163842.html
Copyright © 2011-2022 走看看