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

问题描述

我想知道如何居中显示文字，并且能够在作为组合图表一部分的圆环图中悬停的文字进行更新。

I已经看到使用图表标题verticalAlign和setTitle的解决方案，但是当圆环图是组合图表的一部分时，该方法看起来不起作用。

我也试过使用位于圆环图中心的div。这并不奏效，因为当主要系列的y访问标签变得更宽（即更多数字）时，圆环图向右滑动，并且div不再位于圆环图的中心。

我添加了一个jsfiddle，可以用来演示关于获取呈现文本，标题，div的任何建议，不管集中在圆环图上的任何提示都将随该图移动。 / p>

  {type：'pie'，
 name：'Total consumption'，
  

解决方案

您可以使用 renderer 来添加自定义文字在您的图表上。然后，您可以使用 element.on（）添加事件。查看现场示例：

$ b $

  $（'＃container'）。highcharts（{
图：{
 events：{
 load：function （）{
 var chart = this，
 rend = chart.renderer，$ b $ 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' （）; 
 alert（hover！）; 
}）; 
 
} 
} 
}，
 ... 
}）; 
  

I would like to know how to center text and be able to update that text on hover inside of a donut chart that is part of a combination chart.

I have seen solutions using the chart title, verticalAlign and setTitle but that approach doesn't appear to work when the donut chart is part of a combination chart.

I have also tried using a div positioned in the center of the donut chart. That doesn't work well because when the y access labels of the primary series get wider (i.e. more digits) then the donut chart slides to the right and the div is no longer centered on the donut chart.

I have added a jsfiddle that can be used to demonstrate any suggestions you might have on getting rendered text, a title, a div, whatever centered on the donut chart that will also move with that chart.

{type: 'pie',
 name: 'Total consumption',

http://jsfiddle.net/sJfuA/

解决方案

You can use renderer to add custom text on your chart. Then you can add events using element.on(). See live example: 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!"); 
                    });

                }
            }
        }, 
        ...
     });

这篇关于如何将组合图表中嵌入的圆环图中的文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！