我在悬浮在柱形图中时尝试突出显示整个系列。由于所需图表的性质,所有列都是并排设置的,没有间距。
我在系列中使用 mouseOver 和 mouseOut 部分成功了,但是当它悬停到同一系列的下一个元素时它不起作用。整个系列应保持突出显示,但如果在同一系列中徘徊,我无法禁用mouseOut。
我试过这段代码:
series: [
{
events: {
mouseOver: function() {
for(var i=0; i<this.data.length; i++)
{
this.data[i].setState('hover');
}
},
mouseOut: function(){
for(var i=0; i<this.data.length; i++)
{
this.data[i].setState('');
}
}},
我把它放在jsFiddle
中当你悬停浅蓝色系列时,它会完全突出显示,但是当悬停到该系列中的下一个元素时,系列应该完全保持突出显示,但是我的过期元素会随机突出显示。
任何帮助表示赞赏
更新
根据Robert 提供的解决方案,我添加了一些修改。通过在工具提示格式化程序事件中引入悬停状态的激活,mouseOver行为变得多余,我将其删除。
解决方案:jsFiddle
答案 0 :(得分:5)
稍作改动:
tooltip: {
formatter: function() {
for(var i=0; i<5; i++)
{
this.series.data[i].setState('hover');
}
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
答案 1 :(得分:2)
您需要为每个系列添加事件,请参阅此处
或此处:http://jsfiddle.net/uST2P/
$(function () {
var myCustomEvent = {
mouseOver: function () {
overSeriesIndex = this.index;
for (var i = 0; i < this.data.length; i++) {
this.data[i].setState('hover');
}
},
mouseOut: function () {
for (var i = 0; i < this.data.length; i++) {
this.data[i].setState('');
}
}
};
$('#container').highcharts({
chart: {
type: 'column',
width: 585
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0,
borderColor: 'white',
borderWidth: 1,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
},
series: {
pointWidth: 100
}
},
series: [{
events: myCustomEvent,
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
events: myCustomEvent,
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
events: myCustomEvent,
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});