如何制作堆积柱图以显示总数据值

时间:2013-11-07 05:03:14

标签: highcharts

我想显示下面每列顶部显示的所有列的总数是我想要获取图表的链接。 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/ 以下是我正在使用的代码。

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },


        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: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});

2 个答案:

答案 0 :(得分:30)

您必须使用stackLabels。你在代码中错过了它。你可以在yAxis中找到它 - &gt; stackLabels

 stackLabels: {
    enabled: true,
    style: {
        fontWeight: 'bold',
        color:'gray'
    }
 }

答案 1 :(得分:0)

以下是:

yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color:'gray'
                }
            }

        },