0
私は、円グラフのパーセンテージ計算で無視したいが、凡例アイテムをクリックしたときに表示/非表示にしたいシリーズがあります。シリーズは合計を表し、常に100％でなければなりません。このシリーズの表示をfalseに設定すると、チャートには最初は表示されず、凡例項目はグレー表示になります。ただし、凡例項目をクリックすると、計算された割合の系列が表示されます。私が計算して表示したい値の背後にある別のシリーズが必要なようです。それは常に100％のアイディアですか？Highcharts - Pie Percentageで無視するシリーズ
ありがとうございます！
チャートコンフィグ
vm.installationResultsConfig = {
options: {
exporting: {
type: 'application/pdf',
filename: 'installation-results'
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
backgroundColor: '#F9F9F9',
borderColor: '#eee',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 440
},
title: {
text: 'Installation Results',
align: 'center',
verticalAlign: 'top'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
startAngle: 0,
endAngle: 360,
center: ['50%', '55%'],
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout: 'vertical',
x: -8,
y: 30,
labelFormatter: function() {
if(this.name === 'All Vehicles') {
this.percentage = 100;
}
return '<span>' + this.name + '</span><br />' +
'<span>' + this.dataLabels.count + '</span><br />' +
'<span>' + $filter('number')(this.percentage) + '%</span>';
},
useHTML: true,
itemMarginTop: 5,
itemMarginBottom: 5
}
},
series: [{
type: 'pie',
name: 'Installation Results',
innerSize: '70%',
data: [
{
name: 'All Vehicles', // should be ignored and alway render as 100%
y: chartData.allVehicles,
color: '#999999',
dataLabels: {
count: $filter('number')(chartData.allVehicles)
}
},
{
name: 'Successful',
y: chartData.successful,
color: '#50CF63',
dataLabels: {
count: $filter('number')(chartData.successful)
}
},
{
name: 'Failed',
y: chartData.failed,
color: '#F22F1D',
dataLabels: {
count: $filter('number')(chartData.failed)
}
},
{
name: 'Not Attempted',
y: chartData.notAttempted,
color: '#296499',
dataLabels: {
count: $filter('number')(chartData.notAttempted)
}
}
]
}]
};