如何同步 Highchart Sunburst 行为

Question

如图所示，我想显示两个彼此相邻的旭日形。我想用 Highchart 实现它并以这样的方式做出反应，

如果用户将鼠标悬停在一个旭日图上的任何数据点上，同一数据点应该在另一张图表上突出显示，而其他数据点只会进入禁用模式或将其颜色更改为白色

Answer 1

在 mouseOver 事件中，通过使用对图表的引用，您可以在正确的点以编程方式设置 'hover' 状态：

        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

如何同步 Highchart Sunburst 行为

How to synchronize the Highchart Sunburst behavior

javascript

highcharts

react-highcharts