highcharts 시작 Pie: Pie 케이크 모양의 그림에 백분율을 표시하는 방법 (회전)
3098 단어 HighCharts
전체 핵심 코드는 다음과 같습니다.
$(function () {
var chart;
// highcharts
$(document).ready(function () {
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',// id
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'highcharts (Legend) '
},
tooltip: {
pointFormat: '{series.name}: {point.percentage}%',
percentageDecimals: 1 //
},
plotOptions: {
pie: {
allowPointSelect: true, //
cursor: 'pointer',
dataLabels: {
enabled: true //
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
verticalAlign: 'top',
x: 90,
y: 45,
labelFormatter: function () {
return this.name + '('+this.percentage+'%)';
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
중량:
주로 Legend 레이블 내에서 표시 이름을 포맷해야 합니다.
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
verticalAlign: 'top',
x: 90,
y: 45,
labelFormatter: function () {
return this.name + '('+this.percentage+'%)';//
}
},