如何使用 Vue 3 强制工具提示在高图中的多个图表中显示？

Question

我正在使用带有 Highcharts 的 vue3-highcharts。我想实现这样的目标：https://codepen.io/lzl124631x/pen/KLEdby?editors=1010 但我不确定如何在 Vue 3 中编写这些函数（如语法）。

到目前为止，我已经设法同步 x 轴缩放、悬停和显示十字准线。但是我无法让工具提示显示在所有图表中。这是我为使 xAxis 缩放所做的操作：

xAxis: {
  events: {
    afterSetExtremes: function (e) {
      if (e) {
         Highcharts.charts.forEach((chart) => {
           if (chart && chart.index !== e.chartId) {
              chart.xAxis[0].setExtremes(e.min, e.max);
           }
         })
      }
    }
  }
},

为了让悬停和十字准线同步，我这样做了：

plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: function (e) {
          let series = e.target.series;
          let index = series.xData.indexOf(e.target.index);
          
          Highcharts.charts.forEach((chart) => {
            if (chart && chart.index !== e.chartId) {
              let event = chart.pointer.normalize(e)
              
              let data = chart.series[0].data[index];
              if (data) {
                data.setState('hover');
                chart.xAxis[0].drawCrosshair(event, data);
                
                chart.tooltip.refresh(data); 
              }
            }
          })
        },
        
      }
    }
  }
},

为了显示工具提示，我尝试了：

chart.tooltip.refresh(data);

但这会返回错误。

编辑：万一有人偶然发现的解决方案：

chart.tooltip.refresh([data]);

Answer 1

不幸的是，官方的 Highcharts Vue 包装器不支持 vue3。