带有拆分工具提示的 1 个图形中的多个饼图 Highcharts.js

Question

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

我尝试使用

{
    tooltip: { split: true} 
}

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

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

Answer 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)
        )
      )
    }
  }
},

在鼠标悬停时调用 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])
          })
        }
      }
    }
  }
},

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

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

带有拆分工具提示的 1 个图形中的多个饼图 Highcharts.js

Multiple pie charts in 1 graph with split tooltip Highcharts.js

javascript

charts

tooltip

highcharts

pie-chart