我使用两个系列作为实心标尺,其中一个系列的填充量不正确。我尝试过调整tickInterval,tickValue,min,max,但它并没有什么区别。即使我将该值设置为0,它也会占据超过50%的路径。
vm.ecoScoreData = {
options : {
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
type: 'solidgauge',
backgroundColor: '#F9F9F9',
margin: [0, 0, 0, 0],
height: 340
},
title: null,
legend: {
align: 'center',
layout: 'vertical',
labelFormatter: function () {
return '<span class="gauge-legend-item">' + this.name + '</span><span class="series-value">' + $filter('number')(this.yData[0]) + '</span>';
},
useHTML: true,
x: -10,
y: -20,
itemMarginTop: 4,
itemMarginBottom: 4
},
pane: {
center: ['50%', '70%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#305F2A',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc'
}
},
// the value axis
yAxis: {
minColor: '#74BC54',
maxColor: '#74BC54',
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
text: 'Connected Vehicles',
y: 40
},
labels: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
},
tooltip: {
enabled: false
}
},
series: [
{
name: 'Opt-In '+chartData.optInPercent+'%',
data: [{
name: 'Opt-In',
radius: 100,
innerRadius: 75,
y: chartData.optIn
}],
marker: {
symbol: 'square'
},
lineWidth: 0,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
},
dataLabels: {
formatter: function() {
return'<div style="text-align:center"><span style="font-size:18px;color:#707070">'+$filter('number')(chartData.connectedVehicles)+'</span></div>';
}
}
},
{
name: 'Opt-Out '+chartData.optOutPercent+'%',
data: [{
name: 'Opt-Out',
radius: 100,
innerRadius: 75,
y: 0
}],
marker: {
symbol: 'square'
},
lineWidth: 0,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
},
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:18px;color:#707070">{point.y:,.0f}</span></div>'
}
}
]
};