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

                }
            }
        }, 
        ...
     });

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

1 个答案: