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