1
특정 조건에서 차트의 막대를 특정 색으로 채우고 있지만 막대 위에 마우스를 올려 놓으면 원래 색을 되 찾을 수 있습니다. 하이 차트에 막대의 조건부 색을 유지하는 방법
$(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
에 코드를 참조하십시오.