Javascript Highcharts-更改仅单击列的颜色
我有一个使用Highcharts.js制作的柱状图。点击一个条,它的颜色变为橙色。但当单击另一个条时,先前单击的条的颜色仍为橙色 我想要的是,点击一个条,所有其他条的颜色都应该变成默认颜色Javascript Highcharts-更改仅单击列的颜色,javascript,jquery,html,highcharts,Javascript,Jquery,Html,Highcharts,我有一个使用Highcharts.js制作的柱状图。点击一个条,它的颜色变为橙色。但当单击另一个条时,先前单击的条的颜色仍为橙色 我想要的是,点击一个条,所有其他条的颜色都应该变成默认颜色 $('#container').highcharts({ chart: { type: 'column' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
point: {
events: {
click: function(event) {
console.log(this);
this.update({ color: '#fe5800' }, true, false);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
小提琴链接-
提前感谢。您可以保存对上一条的引用,当单击下一条时,您可以恢复上一条的颜色
$(function () {
var previousPoint = null;
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
point: {
events: {
click: function(event) {
console.log(this);
if (previousPoint) {
previousPoint.update({ color: '#7cb5ec' });
}
previousPoint = this;
this.update({ color: '#fe5800' });
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
请参见
2017年更新:
现在有一种内置的方法可以做到这一点:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2, -1, -2, -3],
color: 'steelblue',
negativeColor: 'indianred',
states: {
select: {
color: 'blue'
}
},
allowPointSelect: true
}]
FIDLE:第二次单击后,只需左右移动鼠标,然后使用
查看效果。使用each()
并在只需要更改一个条形图时重新绘制图表中的所有条形图似乎有些过分。当处理一个有很多点的图时,如果看到性能下降,我不会感到惊讶。谢谢!好小提琴。这个特性的官方文档不是很好。我发现我还可以指定“select:{borderWidth:4,borderColor:'#DDDDDD'}”。这也将响应数据,例如[y:123,selected:true}]。如果我重新初始化图表之类的,我需要这样做。
series: [{
name: 'John',
data: [5, 3, 4, 7, 2, -1, -2, -3],
color: 'steelblue',
negativeColor: 'indianred',
states: {
select: {
color: 'blue'
}
},
allowPointSelect: true
}]