我有以下两个图表:
折线图的配置如下:
highcharts = Highcharts;
chartOptions = {
chart: {
type: "line"
},
credits: {
enabled: false
},
title: {
enabled: true,
text: "Reach +1/" + this.xAxis.name,
verticalAlign: "top",
align: "left"
},
tooltip: {
formatter: function (data) {
return data.chart.userOptions.xAxis.title.text + ": " + this.x.toFixed(4) + "<br/>" +
"Reach: " + this.y.toFixed(4);
}
},
xAxis: {
title: {
text: this.xAxis.name
},
},
yAxis: {
title: {
text: "Reach"
}
},
series: [
{
name: this.xAxis.name,
data: null,
allowPointSelect: true,
point: {
events: {
click(event) {
const point = this;
console.log(point.selected);
const selected = (point.selected === true) ? false : true;
point.series.points.forEach(p => {
p.update({
marker: {
enabled: false
}
}, false);
});
if (selected === false) {
point.update({
marker: {
enabled: false
}
});
} else {
point.update({
marker: {
enabled: true
}
});
}
},
mouseOver: function(event) {
this.filterOptimizationResults(event.target.x, event.target.y);
}.bind(this)
}
}
}
]
};
将鼠标悬停在任何一点上都会触发一个功能,以更新右侧的饼图。
在折线图上,我也可以单击一个点以将其聚焦。
我想做的是,当我单击折线图上的任何点时,请禁用MouseOver功能,以便直到我取消选择所选点后,饼图才会更新。
有什么建议吗?
您可以有条件地在mouseOver
函数中运行一些代码,例如:
series: [{
...,
point: {
events: {
mouseOver: function(){
if (!this.series.points.filter((p) => p.selected).length) {
// do something
}
}
}
}
}]