하이 차트 도넛 - 가운데 텍스트

Question

차트의 다른 부분을 가리키면 텍스트를 출력하고 싶은 도넛 형 차트가 있습니다. 나는 거의 끝났지 만 텍스트를 정확히 가운데 맞추는 것처럼 보이지 않습니다. JSFiddle : http://jsfiddle.net/K5dhu/

코드 : 당신이 볼 수 있듯이, 텍스트가 왼쪽 정렬 시작시 (112), (125)에 위치

$(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(); 
}); 
}); 

. 텍스트 길이에 따라 매번 위치를 설정할 수있는 방법이 있습니까? 또는이 텍스트를 가운데로 설정하는 모든 속성 (내용은 무관). 텍스트는 mouseOver 함수 내에서 마우스를 올리면 설정됩니다.

Answer 1

글쎄,이 질문에 대한 답변의 완벽한 정의가 아닐 수도 있습니다. 그러나 그것은 문제를 다른 방법으로 해결하는 방법이며 훨씬 더 많은 사용자 정의 기능을 제공합니다.

그래프 영역 외부에 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"'); 
     } 
    } 
}