javascript - 如何同步 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