highcharts列标签

时间:2012-08-30 12:39:11

标签: highcharts

我制作了一个包含分组和堆叠列的Highcharts图表,例如此处的示例:http://www.highcharts.com/demo/column-stacked-and-grouped。该示例显示了按性别分组的5个不同人的水果。我在这个例子中遗漏的是一个x轴标签,显示每组下面的组(男性或女性)的名称。是否可以将其添加到图表中?

以下是我正在尝试制作的图表的简化版本:http://jsfiddle.net/WQjVP/66/。它显示了案件处理系统中三个位置的开放(蓝色)和过期(红色)问题的数量。每组中的左列显示7月份该位置的数字,每组中的右列显示同一单位的8月份数字。我想要做的是显示每列下的月份,以便第一列将具有“Jul”,第二列将具有“Aug”,第三列将具有“Jul”,依此类推,在列和之间位置标签。

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
     },
     title: {
         text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ["Location A","Location B","Location C"],
        title: {
            text: "Location"
        }
    },
    yAxis: {
        allowDecimals: false

    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    if (this.y === 0) {
                        return null;
                    }
                    return this.y;
                },
                style: {
                    color: 'white'
                }
            }
        },
        column: {
            stacking: 'normal',
            borderWidth: 0
        }
    },
    series: [{
        "color": "rgb(0,0,255)",
        "name": "open",
        "data": [18, 2, 6],
        "stack": "Jul"},
    {
        "color": "rgb(255,0,0)",
        "name": "overdue",
        "data": [0, 0, 0],
        "stack": "Jul"},
    {
        "color": "rgb(0, 0, 255)",
        "name": "open",
        "data": [20, 1, 10],
        "stack": "Aug"},
    {
        "color": "rgb(255, 0, 0)",
        "name": "overdue",
        "data": [2, 1, 2],
        "stack": "Aug"}]
});

1 个答案:

答案 0 :(得分:15)

尝试使用stackedLabels

yAxis: {
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: 'gray'
        },
        formatter: function() {
            return  this.stack;
        }
    }
}

Demo

reference