javascript - 带有分割工具提示的 1 个图表中的多个饼图 Highcharts.js

Question

目前我正在尝试创建一个包含 3 个饼图的 Highchart 图表。 (所有图表包含完全相同数量的数据点)。当我将鼠标悬停在饼图的一 block 上时，我希望在所有 3 个饼图的同一给定点上显示 3 个工具提示。

我尝试使用

{
    tooltip: { split: true} 
} 

但抛出 JavaScript 错误并且似乎不适用于饼图。我似乎无法让它正常工作。我还尝试重新定义 Highcharts.Tooltip.prototype.renderSplit 但也无法让它工作。

我有以下内容: https://jsfiddle.net/Visualq/4o1uyazr/13/

Answer 1

您可以在图表加载事件上创建多个工具提示，并在鼠标悬停事件上管理它们。

1. 为每个系列创建一个工具提示

   Highcharts.chart('container', {
     chart: {
       type: 'pie',
       events: {
         load() {
           this.tooltips = this.series.slice(1).map(
           series => new Highcharts.Tooltip(
             this,
             Highcharts.merge(this.options.tooltip)
           )
         )
       }
     }
   },
   

2. 鼠标悬停时调用 tooltip.refresh(point)，其中 point 是应悬停的点。我要求具有相同名称的点。

   plotOptions: {
     series: {
       point: {
         events: {
           mouseOver(e) {
             const otherSeries = this.series.chart.series.filter(
               series => series !== this.series
             )
   
             const otherPoints = otherSeries.map(
               series => series.points.find(
                 point => point.name === this.name
               )
             )
   
             this.series.chart.tooltips.forEach((tooltip, i) => {
               tooltip.refresh(otherPoints[i])
             })
           }
         }
       }
     }
   },
   

3. 封装工具提示的隐藏方法，以便所有工具提示将同时隐藏。

   Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(p, delay) {
     if (this === this.chart.tooltip) {
       p.call(this, delay)
   
       this.chart.tooltips.forEach(tooltip => {
         p.call(tooltip, delay)
       })
     }
   })
   

实例:https://jsfiddle.net/8w30m3o8/

如果您不希望工具提示在系列之间交换，则应将工具提示分配给特定系列，例如主工具提示应仅使用第一个系列中的点刷新，第二个工具提示应使用第二个系列中的点刷新，依此类推。

<小时/>

可能更简单的解决方案是使用 3 个图表并同步工具提示，与本示例中的操作类似:https://www.highcharts.com/demo/synchronized-charts