Highchart内部甜甜圈名称作为外部甜甜圈工具提示的标题

时间:2017-02-08 12:24:24

标签: highcharts donut-chart

我正在尝试将内部甜甜圈名称设置为高级图中外部甜甜圈工具提示的标题。任何人都可以帮我这个。在示例链接中,内部饼图上显示的chrome应显示为外部甜甜圈工具提示中所有chrome细分的标题。

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

谢谢, 萨拉

1 个答案:

答案 0 :(得分:2)

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

如果在为图表创建数据时将外部点与内部点链接起来会很有帮助。

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()
});

现在,在格式化程序中,您可以检查名称系列 - 并根据它 - 返回默认格式化程序或标题中包含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/