如何在组合图表中嵌入环形图表中的文本中心

Question

我想知道如何居中文本并能够更新悬停在作为组合图表一部分的环形图表内的文本。

我已经看到使用图表标题verticalAlign和setTitle的解决方案，但是当圆环图是组合图表的一部分时，该方法看起来不起作用。

我也尝试使用定位在甜甜圈图中心的div。这并不奏效，因为当主要系列的y访问标签变得更宽（即更多数字）时，则环形图向右滑动，并且div不再位于环形图上。

我已经添加了一个jsfiddle，可以用来演示关于获取呈现文本，标题，div的任何建议，不管集中在圆环图上的任何建议都将随该图移动。

{type: 'pie', 
name: 'Total consumption', 

http://jsfiddle.net/sJfuA/

Answer 1

您可以使用renderer到图表上添加自定义文本。然后您可以使用element.on()添加事件。见活生生的例子：http://jsfiddle.net/sJfuA/2/

$('#container').highcharts({ 
     chart: { 
      events: { 
       load: function() { 
        var chart = this, 
         rend = chart.renderer, 
         pie = chart.series[4], 
         left = chart.plotLeft + pie.center[0], 
         top = chart.plotTop + pie.center[1], 
         text = rend.text("text", left, top).attr({ 'text-anchor': 'middle'}).add(); 

        text.on("mouseover", function() { 
         alert("hover!"); 
        }); 

       } 
      } 
     }, 
     ... 
    });