Highcharts甜甜圈 - 中心文本

问题描述：

当我将鼠标悬停在图表中的不同部分时，我想要输出文字。我快完成了，但我似乎无法让文本正确居中。的jsfiddle：http://jsfiddle.net/K5dhu/Highcharts甜甜圈 - 中心文本

代码：

$(function() {  
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd']; 
var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'DivGraphCategories', 
    type: 'pie', 
    height: 250, 
    width: 250, 
    borderRadius: 0 
}, 
credits: { 
    enabled: false 
}, 
title: false, 

plotOptions: { 
    pie: { 
     borderWidth: 0, 
     startAngle: 90, 
     innerSize: '70%', 
     size: '100%', 
     shadow: false, 
     // { 
     //  color: '#000000', 
     //  offsetX: 0, 
     //  offsetY: 2, 
     //  opacity: 0.7, 
     //  width: 3 
     // }, 
     dataLabels: false, 
     stickyTracking: false, 
     states: { 
      hover: { 
       enabled: false 
      } 
     }, 
     point: { 
     events: { 
      mouseOver: function(){ 
       this.series.chart.innerText.attr({text: this.y}); 
      }, 
      mouseOut: function(){ 
       this.series.chart.innerText.attr({text: "Mouseout value"}); 
      } 
     } 
     } 
    } 
}, 

series: [{ 
    data: [ 
     {y: 6926, name: 'hopp1'}, 
     {y: 1370, name: 'hopp2'}, 
     {y: 1250, name: 'hopp3'}, 
     {y: 10000, name: 'hopp4'}, 
     {y: 1062, name: 'hopp5'}, 
     {y: 6376, name: 'hopp6'}, 
     {y: 2514, name: 'hopp7'}, 
     {y: 349, name: 'hopp8'} 
    ] 
    // 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.innerText = chart.renderer.text('Start value', 112, 125).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(); 
}); 
});

正如你所看到的，文本左对齐，并定位在112，125在启动。有没有什么方法可以根据文本的长度每次设置位置？或者将此文本设置为中心的任何属性，无论其中的内容如何。文本在mouseOver函数中悬停时设置。

只有什么在我脑海中是基于宽度和设定值计算出该物体的位置作为tspan的x参数 – 2013-05-10 12:43:58

答

嗯，这可能不是这个问题答案的完美定义。但这是以另一种方式解决问题的一种方式，它提供了更多的可定制性。

在图形区域之外创建div或其他东西，并将其与css精确定位在圆环图的显示位置的中心。

例子：

<div class="graph_center"> 
    <h5 id="GraphCenterName"></h5> 
    <h3 id="GraphCenterValue"></h3 
</div>

然后你只需使用鼠标悬停和鼠标移开事件是这样的：

point: { 
    events: { 
     mouseOver: function(){ 
      $('#GraphCenterName').text(this.name); 
      $('#GraphCenterValue').text(this.y); 
     }, 
     mouseOut: function(){ 
      $('#GraphCenterName').text('Whatever default text you want'); 
      $('#GraphCenterValue').text('Whatever default value you want"'); 
     } 
    } 
}

Highcharts甜甜圈 - 中心文本

相关推荐