Как показано на изображении, я хочу показать две солнечные лучи рядом друг с другом. Я хочу реализовать это с помощью Highchart и отреагировать таким образом, чтобы
Если пользователь наведет указатель мыши на любую точку данных на одном солнечном луче, эта же точка данных должна быть выделена на другом графике, в то время как другие точки данных просто перейдут в отключенный режим или изменят свой цвет на белый.
В событии mouseOver, используя ссылки на графики, вы можете программно установить состояние «зависания» в нужной точке:
point: {
events: {
mouseOver: function() {
const chart1 = component.highchartsChart1.current.chart;
const chart2 = component.highchartsChart2.current.chart;
function clearState(chart) {
Highcharts.each(chart.series[0].points, function(p) {
p.setState("");
});
}
if (this.series.chart === chart1) {
clearState(chart2);
chart2.series[0].points[this.index].setState("hover");
} else {
clearState(chart1);
chart1.series[0].points[this.index].setState("hover");
}
}
}
}
Живая демонстрация: https://codesandbox.io/s/nn54z2234m
API: https://api.highcharts.com/class-reference/Highcharts.Point#setState
