Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/398.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 一个图形中的多个饼图,带有拆分工具提示Highcharts.js_Javascript_Charts_Highcharts_Tooltip_Pie Chart - Fatal编程技术网

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

Javascript 一个图形中的多个饼图,带有拆分工具提示Highcharts.js,javascript,charts,highcharts,tooltip,pie-chart,Javascript,Charts,Highcharts,Tooltip,Pie Chart,目前,我正在尝试创建一个包含3个饼图的Highchart图表。所有图表都包含完全相同数量的数据点。当我将鼠标悬停在一块饼图上时,我希望在同一给定点的所有3个饼图上显示3个工具提示 我试着用 { tooltip: { split: true} } 但是抛出一个JavaScript错误,并且似乎无法处理饼图。我似乎无法让它正常工作。我还尝试重新定义Highcharts.Tooltip.prototype.renderSplit,但也无法使其正常工作 我有以下资料: 您可以在图表加载事件

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

我试着用

{
    tooltip: { split: true} 
} 
但是抛出一个JavaScript错误,并且似乎无法处理饼图。我似乎无法让它正常工作。我还尝试重新定义Highcharts.Tooltip.prototype.renderSplit,但也无法使其正常工作

我有以下资料:

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

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

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.refreshpoint上,其中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)
    })
  }
})
实例:

如果不希望在系列之间交换工具提示,则应为特定系列指定工具提示,例如,主工具提示应仅使用第一个系列中的点刷新,第二个工具提示使用第二个系列中的点刷新,依此类推


可能更简单的解决方案是使用3个图表并同步工具提示,就像本例中一样:

此答案告诉您如何同步多个图表的工具提示:摘自highcharts页面上的此资源:@ewolden感谢您的评论,然而,饼图不能像问题中描述的那样同步,因为searchPoint不能在饼图上工作。我找不到这个声明的来源,但我尝试了这个。Split应该做我想做的事情,但出于某种原因它破坏了工具提示。我的错是,我做了一些调查,发现它失败的地方,似乎是一个bug,Split工具提示需要一个包含x和y值的序列。然而,馅饼实际上并不属于这一类。这里我在错误上设置了一个断点:设置anchorX时失败,因为f未定义。