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

时间:2018-05-31 11:24:12

标签: javascript charts highcharts tooltip pie-chart

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

我尝试使用

{
    tooltip: { split: true} 
} 

但抛出了JavaScript错误,似乎无法在饼图上运行。我似乎无法使其正常工作。我也尝试重新定义Highcharts.Tooltip.prototype.renderSplit,但无法使其工作。

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

1 个答案:

答案 0 :(得分: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)
        })
      }
    })
    
  4. 直播示例:https://jsfiddle.net/8w30m3o8/

    如果您不希望工具提示在系列之间切换,则应为特定系列分配工具提示,例如:主要工具提示应仅使用第一个系列中的点进行刷新,第二个工具提示应使用第二个系列中的点进行刷新,依此类推。

    可能更简单的解决方案是使用3个图表并同步工具提示,就像在此示例中所做的那样:https://www.highcharts.com/demo/synchronized-charts