我正在使用柱状图制作项目。我编写了一个自定义函数,根据每个柱子的y值来着色。当我初始化图表时,这很有效。但是当我悬停在图表上时,柱子的颜色会恢复默认值,我的自定义颜色永远不会返回。
我尝试了禁用悬停,但似乎没有起作用。我不希望在悬停在柱子上时颜色改变。有什么建议吗?
我正在使用柱状图制作项目。我编写了一个自定义函数,根据每个柱子的y值来着色。当我初始化图表时,这很有效。但是当我悬停在图表上时,柱子的颜色会恢复默认值,我的自定义颜色永远不会返回。
我尝试了禁用悬停,但似乎没有起作用。我不希望在悬停在柱子上时颜色改变。有什么建议吗?
你正在寻找这个选项:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
在这里玩转Fiddle。
编辑
不要直接修改SVG来设置颜色,而是通过api进行操作:
var max = 200;
var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
return {
color: datum > max ? 'red' : '#2f7ed8',
y: datum
};
});
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: seriesData
}]
});
新的小样。
您在错误的方式中更新颜色,应该使用point.update()
替代,示例代码如下:http://jsfiddle.net/CaPG9/8/
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
},function(chart){
var max = 200;
$.each(chart.series[0].data,function(i,data){
if(data.y > max)
data.update({
color:'red'
});
});
});
series: [{ data: [{x: x-value, y: y-value, color: 'red' }] }]
。 - Paweł Fus