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

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

                }
            }
        }, 
        ...
     });