Highcharts制作百分比柱形图

时间:2014-03-21 17:10:55

标签: javascript highcharts percentage

我如何制作百分比柱形图?

喜欢这个 http://www.highcharts.com/demo/column-basic

不喜欢这个! http://www.highcharts.com/demo/column-stacked-percent

非常感谢你的帮助。

2 个答案:

答案 0 :(得分:2)

enter image description here

jsfiddle demo

var data = [{
        name: 'A',
        data: [72, 50, 52]
    }, {
        name: 'B',
        data: [23, 41, 12]
    }, {
        name: 'C',
        data: [18, 9, 11]
    }, {
        name: 'D',
        data: [89, 46, 54]
    }];
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Group 1', 'Group 2', 'Group 3']
        },
        yAxis: {
            title: {
                text: null
            }
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        var mychart = $('#container').highcharts();
                        var mytotal = 0;

                        for (i = 0; i < mychart.series.length; i++) {
                            if (mychart.series[i].visible) {
                                mytotal += parseInt(mychart.series[i].yData[0]);
                            }
                        }
                        var pcnt = (this.y / mytotal) * 100;
                        return Highcharts.numberFormat(pcnt) + '%';
                    }
                }
            }
        },
        title: {
            text: 'Example'
        },
        series: data
    });

答案 1 :(得分:1)

使用这个:

chart.series[0].update({
          dataLabels:{
                enabled:true,
                formatter:function() {
                    var mytotal = 0;
                    for (i = 0; i < chart.series.length; i++) {
                        if (chart.series[i].visible) {
                             for (j = 0; j < chart.series[i].yData.length; j++) {
                                 mytotal += parseInt(chart.series[i].yData[j]);
                             }
                            console.log("Total : "+ i + " Total : "+ mytotal + " length" + chart.series[i].yData.length);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
    });