Highcharts在中心更改悬停中的甜甜圈图表文字

我正在寻找一种让悬停时更改中心图标的方式。当没有悬停状态时，中心将显示总金额（这里我代表休假日，因此可能是15个休假日）。悬停时，中心的文字需要与细分的部分（可用，请求和休假日期）相匹配，但我无法弄清楚如何根据悬停来更改中心内的文字。有没有人有任何想法？任何帮助是极大的赞赏！！Highcharts在中心更改悬停中的甜甜圈图表文字

http://jsfiddle.net/NVX3S/146/

<script src="http://code.highcharts.com/highcharts.js"></script> 

<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div> 


$(function() { 
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd']; 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container1', 
      type: 'pie', 
      height: 250, 
      width: 250, 
      borderRadius: 0 
     }, 
     credits: { 
      enabled: false 
     }, 
     title: false, 
     tooltip: false, 
     plotOptions: { 
      pie: { 
       borderWidth: 6, 
       startAngle: 90, 
       innerSize: '55%', 
       size: '100%', 
       shadow: true, 
       // { 
       //  color: '#000000', 
       //  offsetX: 0, 
       //  offsetY: 2, 
       //  opacity: 0.7, 
       //  width: 3 
       // }, 
       dataLabels: false, 
       stickyTracking: false, 
       states: { 
        hover: { 
         enabled: true 
        } 
       } 
      } 
     }, 

     series: [{ 
      data: [ 
       {y:65, color: colors[0]}, 
       {y:15, color: colors[1]}, 
       {y:20, color: colors[2]} 
      ] 
      // data: [ 
      //  ['Firefox', 44.2], 
      //  ['IE7',  26.6], 
      //  ['IE6',  20], 
      //  ['Chrome', 3.1], 
      //  ['Other', 5.4] 
      // ] 
     }] 
    }, 
    function(chart) { // on complete 

     var xpos = '50%'; 
     var ypos = '53%'; 
     var circleradius = 102; 


    // Render the text 
    chart.renderer.text('126.5', 103, 127).css({ 
      width: circleradius*2, 
      color: '#4572A7', 
      fontSize: '16px', 
      textAlign: 'center' 
     }).attr({ 
      // why doesn't zIndex get the text in front of the chart? 
      zIndex: 999 
     }).add(); 
    }); 
});

来源

2013-03-27 sarahholden

使用points.events.mouseOver/mouseOut，例如：http://jsfiddle.net/NVX3S/147/

代码：

  point: { 
       events: { 
        mouseOver: function(){ 
         this.series.chart.innerText.attr({text: this.y}); 
        }, 
        mouseOut: function(){ 
         this.series.chart.innerText.attr({text: 112}); 
        } 
       } 
      }

其中的innerText只是自定义属性，这样创建：

chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();

来源

2013-03-28 16:48:22

非常感谢！这就像一个魅力。我非常感谢你的帮助！ – sarahholden 2013-03-28 17:39:47

在jsfiddle中你提到var circleradius = 102;你是如何得到这个circleradius的？有什么方法可以动态获取？ – Vivek 2015-01-20 07:52:08

最好向问题作者提问。这不是我的代码的一部分。我会这样计算内心的位置：http://jsfiddle.net/NVX3S/904/（只是玩标签的边界框和派的中心位置）。 – 2015-01-20 10:47:26

Highcharts在中心更改悬停中的甜甜圈图表文字

回答

相关问题