Как синхронизировать поведение Highchart Sunburst

Question

Как показано на рисунке, я хочу показать две солнечные вспышки рядом друг с другом.Я хочу реализовать это с помощью Highchart и реагировать таким образом, чтобы

Если пользователь наведет курсор мыши на любую точку данных на одном солнечном луче, эта же точка данных должна быть выделена на другом графике, тогда как другие точки данных просто переходят вотключен режим или меняет цвет на белый

Answer 1

В событии 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