var data = [A:10,B:20,C:25,D:25,E:10,F:10] //已经算好的百分比数值
//var data = [A:20,B:30,C:25,D:25,E:40,F:10] 原始数值让Highcharts自动算出百分比
function renderTypeChart(data) {
if(data.length == 0){
$('#typeChart').find('.no-data').show() //无数据时显示的提示
} else {
$('#typeChart').find('.no-data').hide();
Highcharts.chart('typeChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: 'none'
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle'
},
credits: { // 隐藏版权
enabled: false
},
exporting: { // 隐藏导出功能
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px; color: #f55c76; font-size: 14px; font-weight: bold;">{point.key}</span><table>',
pointFormat: '<tr><td style="color:#b7b7b7;padding:0">{series.name}: </td></tr>' +
'<tr><td style="padding:0; font-size: 18px; color: #000; font-weight: bold;">{point.y}%</td> </tr>',//data不是算好的百分比数据 则为{point.percentage:.2f}% 保留两位小数
footerFormat: '</table>',
shared: true,
useHTML: true,
backgroundColor: '#fff',
borderWidth: 1,
borderRadius: 8,
borderColor: '#fff'
},
plotOptions: {
pie: {
borderWidth: 0,
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
center: ['30%', '60%'],
size: '75%',
showInLegend: true
}
},
legend: {
align: 'right',
width: 150,
floating: true,
verticalAlign: 'middle',
y: 20,
maxHeight:208,
symbolWidth: 6,//标志宽
symbolHeight: 6,//标志高
itemStyle: {"color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "normal"},
labelFormatter: function () {
return this.name + '<span style="color:#AEAEAE"> (' + this.y + '%)</span>';//在图例项名称后面追加百分比数据,如果data数据不是百分比则为this.percentage.toFix(2)
},
navigation: {
activeColor: '#2c90c7',
animation: true,
arrowSize: 10,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
},
series: [{
type: 'pie',
name: '数据比重',
innerSize: '50%', // 内环半径大小
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
data: data,
colors: ['#9a9cff', '#f384ae', '#3dacea', '#ff989b', '#2c90c7', '#febb37', '#6ac6cd', '#ea6966', '#3fc4b0', '#fcb88b', '#50e29d','#9a9cfe', '#f384aa', '#3dacca', '#ff989d', '#2c90c6', '#febb39', '#6ac66b', '#ea6968', '#3fc4b2', '#fcb88f',]
}]
});
}
}
Highcharts 饼图相关设置
最新推荐文章于 2023-08-08 11:16:21 发布