Highcharts并排堆叠比较

时间:2014-08-28 18:14:57

标签: javascript graph highcharts

我的图表类似于Highcharts网站上的平均每月降雨量演示:http://www.highcharts.com/demo/column-basic

但我想进一步将每个月的城市数据分成两个子类别叠加在一起Fiddle

$('#Bar1170hMonthly').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Counts'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Counts'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:f} cases</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                //stacking: 'normal',
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: {
        cursor: 'pointer',
        point: {
                events: {
                    click: function() {

                    }
                }
            }
        }

        , series: [
            {
            grouping:true,     
            name: '2011: 36',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 19]

        }, {
            name: '2012: 237',
            data: [13, 14, 35, 23, 37, 11, 23, 22, 8, 12, 18, 21]

        }, {
            name: '2013: 360',
            data: [43, 23, 35, 18, 44, 23, 35, 24, 23, 31, 25, 36]

        },
        {
            name: '2014: 112',
            data: [[7, 8], [1, 2], [1, 2], 32, 9, 0, 0, 0, 0, 0, 0, 0]

        }]

    });

对于每年的每个月,我想将计数分成两个子类别a,b和堆叠在一起。这可能吗?

1 个答案:

答案 0 :(得分:1)

你需要使用stacking: "normal"并为每个堆栈设置stack: "id",其中id必须介于两者之间。例如:http://jsfiddle.net/7jfcpyo2/4/

 {
     stacking: true,
     stack: 'B',
     name: '2014: 112: stack A',
     data: [6, 1, 1, 32, 9, 0, 0, 0, 0, 0, 0, 0]

 }, {
     stacking: true,
     stack: 'B',
     name: '2014: 112: stack B',
     data: [9, 2, 2, 32, 9, 0, 0, 0, 0, 0, 0, 0]

 }

上面的两个系列将相互叠加,干扰任何其他系列。你可以拥有尽可能多的堆栈。