以高位餅圖爲中心的文本響應

Question

我在聚焦高餅圖中的文本時出現了一個小問題。

我此腳本的餅圖

var chart1 = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'finance-1', 
         type: 'pie' 
        }, 
        credits: { 
         enabled: false 
        }, 
        title: { 
         text: '', 
        }, 
        tooltip: { 
         enabled: false 
        }, 
        plotOptions: { 
         pie: { 
          borderColor: null, 
          innerSize: '70%', 
          dataLabels: { 
           enabled: false 
          } 
         } 
        }, 
        series: [{ 
         data: [ 
          { y: 64, color: '#283139' }, 
          { y: 46, color: '#ebebeb' } 
         ] 
        }] 
       }, 
       // using 

       function (chart1) { // on complete 
        var xpos = '50%'; 
        var ypos = '50%'; 
        var circleradius = 40; 

        // Render the circle 
        chart1.renderer.circle(xpos, ypos, circleradius).attr({ 
         fill: '#fff', 
        }).add(); 

        // Render the text 
        chart1.renderer.text('3.900' + ' kr.', 100, 90).css({ 
         width: circleradius * 2, 
         color: '#222', 
         fontSize: '18px', 
         textAlign: 'center', 
         fontFamily: 'dinotmedium', 
        }).attr({ 
         // why doesn't zIndex get the text in front of the chart? 
         zIndex: 999 
        }).add(); 
       }); 

       var chart2 = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'finance-2', 
         type: 'pie', 
         backgroundColor: '#ebebeb' 
        }, 
        credits: { 
         enabled: false 
        }, 
        title: { 
         text: '', 
        }, 
        tooltip: { 
         enabled: false 
        }, 
        plotOptions: { 
         pie: { 
          borderColor: null, 
          innerSize: '70%', 
          dataLabels: { 
           enabled: false 
          } 
         } 
        }, 
        series: [{ 
         data: [ 
          { y: 86, color: '#fff' }, 
          { y: 14, color: '#283139' } 
         ] 
        }] 
       }, 

這個作品幾乎，因爲它應該，但文字居中不響應， - 因爲它是一個靜態的位置，

chart1.renderer.text('3.900' + ' kr.', 100, 90) 

的當屏幕尺寸變小時，文字將移出中心。

如何根據屏幕大小將它放置在餅圖的中心？

Answer 1

固定它自己

title: { 
     text: '3.900 kr', 
     verticalAlign: 'top', 
     floating: false, 
     align: 'center', 
     y: 80, 
     style: { 
      fontFamily: 'dinotmedium', 
     } 
}, 

做同樣的事情，它完美

Answer 2

使用redraw事件來定位文本在圖表的重繪（包括窗口大小調整）上。重要的是將呈現的文本存儲在變量中。例如：

// Render the text 
chart1.myText = chart1.renderer.text('3.900' + ' kr.', 100, 90) 

而且redraw回調：

var chart1 = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'finance-1', 
    type: 'pie', 
    events: { 
     redraw: function() { 
      if(this.myText) { 
       this.myText.attr({ 
       x: new_X_position, 
       y: new_Y_position, 
       }); 
      } 
     } 
    } 
    }, 
... 
});