Highcharts:用年份包装柱形图月份范围

时间:2014-02-13 00:27:45

标签: javascript charts highcharts

我正在使用highcharts构建堆积柱形图,该图表显示24个月内的月份数据,通常超过三年。

我目前的代码如下:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr', 'Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total investments'
            },
            stackLabels: {
                enabled: false,
                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',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            name: 'Bad',
            data: [90000, 100000, 110000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }, {
            name: 'OK',
            data: [0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0]
        }, {
            name: 'Good',
            data: [250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000, 250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000]
        }]
    });
});

JSFiddle of my current set up is here并且希望有人可以如何在相关年份中包装每组几个月,如下图所示:

enter image description here

1 个答案:

答案 0 :(得分:2)

您可以使用扩展程序,该扩展程序允许对类别进行分组。

http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories