Highcharts应用--百分比条形图

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

现有一个需求，用条形图的方式，同时显示数据和百分比

highcharts条形图中没有提供显示百分比的API，只有百分比堆叠柱状图和饼图可以显示，调用的接口是this.percentage，普通的柱状图和条形图想要显示百分比需要调用formatter格式化输出百分比。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: '各洲不同时间的新生婴儿数量与本洲总人数占比条形图'
        },
        xAxis: {
            categories: ['非洲', '美洲', '亚洲', '欧洲'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '人口总量 (百万)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' 百万'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,  //显示数量提示
                    color: '#000000',
                    formatter : function() {
                        a = this.y/this.total*100;    //a为当前柱状图y轴值除以总数然后乘以100
                        return this.y+"百万<br/>"+a.toFixed(2) + "%";  //返回百分比和个数
                    }
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: '1900 年',
            data: [
                {
                    y:20,total:100
                },
                {
                    y:29,total:802
                },
                {
                    y:10,total:900
                },
                {
                    y:33,total:195
                }
            ]
        },{
            name: '2000 年',
            data: [
                {
                    y:56,total:300
                },
                {
                    y:35,total:340
                },
                {
                    y:48,total:900
                },
                {
                    y:66,total:255
                }
            ]
        }]
    });
});