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 餅圖相關設置
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.