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

                }
            }
        }, 
        ...
     });