highcharts列标签 [英] highcharts column labels

问题描述

我使用分组和堆积的列制作了一张Highcharts图表，如下面的示例所示： http://www.highcharts.com/demo/column-stacked-and-grouped 。这个例子显示了5个不同人的许多成果，按性别分组。在这个例子中，我想念的是一个x轴标签，显示每个组下面的组（男性或女性）的名称。是否可以添加到图表？

I have made a Highcharts chart with grouped and stacked columns, like in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped. The example shows a number of fruits for 5 different persons, grouped by gender. What I miss in this example, is an x-axis label showing the name of the group (male or female) underneath each group. Is it possible to add this to the chart?

以下是我试图制作的图表的简化版本： http://jsfiddle.net/WQjVP/66/ 。它显示了案件处理系统中三个地点的开放（蓝色）和逾期（红色）问题的数量。每组中的左列显示7月份该位置的编号，每组中的右列显示同一单位的8月份编号。我想要做的是在每一列下显示月份，以便第一列将有七月，第二列将有八月，第三列将有七月等，列和位置标签。

Here is a simplified version of the chart I'm trying to make: http://jsfiddle.net/WQjVP/66/. It shows the number of open (blue) and overdue (red) issues for three locations in a case handling system. The left column in each group shows the numbers for that location for July, and the right column in each group shows the numbers for August for the same unit. What I would like to do is to show the month under each column, so that the first column will have "Jul", the second will have "Aug", the third will have "Jul" and so on, between the column and the location label.

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"}]
});

推荐答案

尝试使用 stackedLabels 。

Try to use stackedLabels.

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

演示

参考资料

这篇关于highcharts列标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！