如何在组合图中嵌入的圆环图中居中文本

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!"); 
                    });

                }
            }
        }, 
        ...
     });