如何同步Highchart朝阳行为

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