我在特定条件下将图表的条形填充为特定颜色,但鼠标悬停在条形上时,它正在恢复其原始颜色。
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Title',
style: { fontSize: '17px', color: 'Black', fontWeight: 'bold', fontfamily: 'Times New Roman' }
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'AT',
'KW',
'ND',
'IT'
]
},
yAxis: {
min: 0,
title: {
text: 'Attributes Scores'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
minPointLength: -200
}
},
series: [{
name: 'YTD',
color: "#4F81BD",
data: [67, 66, 87, 60]
// data: eval('(' + seriesYTD + ')')
}, {
name: 'MAY',
color: "#BFBFBF",
data: [65, 65, 57, 70]
}, {
name: 'JUNE',
color: "#92D050",
data: [61, 77, 47, 94]
}],
exporting: {
enabled: false
}
}, function (chart) {
var ct = 0;
var minArray = new Array();
$.each(chart.series[0].data, function (i, data) {
min = data.y;
minArray[ct] = data.y;
// alert(minArray[ct]);
ct = ct + 1;
});
ct = 0;
$.each(chart.series[2].data, function (i, data) {
// alert('1: '+ data.y + ' - 2: '+ minArray[ct]);
if (data.y < minArray[ct])
data.graphic.attr({
fill: 'red'
});
else
data.graphic.attr({
fill: '#92D050'
});
ct = ct + 1;
});
});
});
请参阅此jsfiddle上的代码
请建议如何解决此问题,以便在工具提示视图后,更改的颜色(即红色)保留在特定栏上。