Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
现有一个需求,用玫瑰图的方式,显示不同行业的某个贷款规模占所有贷款规模的比例
highcharts条形图中没有提供显示百分比的API,只有百分比堆叠柱状图和饼图可以显示,调用的接口是this.percentage,普通的柱状图和条形图想要显示百分比需要调用formatter格式化输出百分比。
$('#container-rose').highcharts({
chart: { polar: true, type: 'column' },
title: { text: '本支行XX贷款规模区间不同行业的贷款企业数量及占比' },
legend: { enabled: false },
xAxis: {
tickmarkPlacement: 'on',
categories: ['教育', '批发和零售业', '房地产业', '公共管理、社会保障和社会组织', '农、林、牧、渔业', '住宿和餐饮业', '制造业', '国际组织', '科学研究和技术服务业', '采矿业', '卫生和社会工作']
},
yAxis: {
title: {
text: '行业 (数量/百分比)'
},
min: 0,
labels: {
formatter: function (){
return this.value + '个';
}
}
},
tooltip: {
formatter: function () {
a = this.y/this.point.stackTotal*100;
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '个 (' + a.toFixed(2) + "%)";
}
},
plotOptions: {
series: {
groupPadding: 0, pointPlacement: 'on', stacking: 'normal'
}
},
series: [
{
name: '1000+',
data: [11, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
},
{
name: '500-1000',
data: [11, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
},
{
name: '300-500',
data: [11, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
},
{
name: '200-300',
data: [12, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
},
{
name: '100-200',
data: [13, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
},
{
name: '50-100',
data: [14, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
},
{
name: '0-50',
data: [15, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12]
}
]
});