Highcharts应用--百分比条形图

本文主要是介绍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轴值除以总数然后乘以100return 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}]}]});
});