0
我试图在dataLabels中添加图标，我成功添加了一些HTML这样的return '<span style="color:#89891C">Partially rejected: ' + partial + '</span><br/>' +'<span style="color:#933">Rejected: ' + rejected + '</span>';，但现在我想添加图标，而我正在使用** Ionicons *。下面的代码：Highcharts Gauge：添加图标
var chart=Highcharts.chart(id, {
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
exporting: { enabled: false },
title: {
text: ''
},
pane: {
startAngle: -150,
endAngle: 150,
background: {
from: 0,
to: partial+rejected,
backgroundColor: '#f55',
innerRadius: '85%',
outerRadius: '50%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: parseInt(val),
tickInterval: 1,
tickPosition: 'outside',
minorTickColor: '#FF0000',
tickColor: '#FF0000',
tickWidth: 2,
tickLength: 10,
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
title:{text:'Total: '+val,style:{ color:"#333" }},
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: delivered,
color: '#21A121',
thickness: '15%',
id: 'plot-band-1'
}]
}],
series: [{
name: 'Managed',
data: [{
id: 'deliver',
y: parseInt(total),
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}],
dataLabels: {
formatter: function() {
var total = this.y;
return '<i class="ion-information-circled" title="RP: '+partial+'" style="color:#EEF007"></i><i class="ion-information-circled" title="RT: '+rejected+'" style="color:#F00707"></i>';
},
backgroundColor: {
linearGradient: {
x1: 10,
y1: 10,
x2: 10,
y2: 11
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' '
}
}]
});
我试图得到正确的部分是在dataLabels，如果有任何信息，您可能需要了解什么，我试图实现，只是问我，在此先感谢