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

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

                }
            }
        }, 
        ...
     });