Highchart 内部甜甜圈名称为外部甜甜圈工具提示的 header

Question

我正在尝试将内部甜甜圈名称设置为高图中外部甜甜圈工具提示的 header。谁能帮我解决这个问题。在示例中，内部饼图上显示的 link chrome 对于外部甜甜圈工具提示中的所有 chrome 细分应显示为 header。

http://www.highcharts.com/demo/pie-donut

谢谢，萨拉斯

Answer 1

您需要设置自己的 tooltip.formatter 回调。

如果您在为图表创建数据时 link 外部点和内部点会很有帮助。

versionsData.push({
  name: data[i].drilldown.categories[j],
  browserName: categories[i], //additional property for linking with the inner series
  y: data[i].drilldown.data[j],
  color: Highcharts.Color(data[i].color).brighten(brightness).get()
});

现在，您可以在格式化程序中检查名称系列 - 并根据它 - return 默认格式化程序或 header 中将包含 point.browserName 的修改文本

tooltip: {
  valueSuffix: '%',
  formatter: function(tooltip) {
    if (this.series.name === 'Versions') {
      return ('<span style="font-size: 10px">' + this.point.browserName + '</span><br/>').concat(tooltip.bodyFormatter([this]));
    }

    return tooltip.defaultFormatter.call(this, tooltip);
  }
},

示例：http://jsfiddle.net/wss6896b/

Highchart 内部甜甜圈名称为外部甜甜圈工具提示的 header

Highchart inner donut name as header for outer donut tooltip

highcharts

donut-chart