高图集-更改只单击的列的颜色
高图集-更改只单击的列的颜色
提问于 2014-05-09 08:40:02
我有一个用Highcharts.js制作的柱状图。在点击一个条形，它的颜色改变为橙色。但是当另一个条子被点击时，以前点击的条形的颜色仍然是橙色的。
我想要的是，在单击一个条形图时，所有其他条形图的颜色应该变成默认的。
$('#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]
}]
});小提琴链接- 演示.
提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-09 09:04:56
小提琴
var series = chart.series[0];
series.color = "#FF00FF";
chart.legend.colorizeItem(series, series.visible);
$.each(series.data, function(i, point) {
point.graphic.attr({
fill: '#FF00FF'
});
});
series.redraw();Stack Overflow用户
发布于 2017-04-03 10:56:55
2017年最新情况：
现在已经有了一种可以做到这一点的方法：
series: [{
name: 'John',
data: [5, 3, 4, 7, 2, -1, -2, -3],
color: 'steelblue',
negativeColor: 'indianred',
states: {
select: {
color: 'blue'
}
},
allowPointSelect: true
}]小提琴：http://jsfiddle.net/nk1v22du/
Stack Overflow用户
发布于 2014-05-09 09:01:58
您可以保存对前一个栏的引用，当单击下一个栏时，可以还原前一个栏的颜色。
$(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]
}]
});
});请参阅http://jsfiddle.net/amyamy86/Xm4vW/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23560148
复制相关文章
相似问题
腾讯云开发者
