設置餅圖對應的提示文字的顏色與餅圖塊狀一樣，demo如下：
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '各練案等級分布'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
colors:['#4dd3b9','#fdd67f','#ffaca8','#64bcec'],
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
dataLabels: {
enabled: true,
formatter: function() {
if(this.point.name == '初級'){
return '<span style="color:#4dd3b9">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '中級'){
return '<span style="color:#fdd67f">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '高級'){
return '<span style="color:#ffaca8">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '不分等級'){
return '<span style="color:#64bcec">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}
}
}
}
},
series: [{
type: 'pie',
name: '占比',
data: [
['初級', 46],
['中級', 29],
['高級', 15],
['不分等級',39]
]
}]
});
});
效果圖：
