円グラフの中心にテキストを追加するハイチャート

Question

円グラフの中央に、特定のフォント、フォントサイズ、フォントカラーを持つテキストを追加します。どのようにハイチャートを使用して、以下のコードのために行うことが可能ですか？

私は他の投稿を使ってこれを解決するためにかなりの方法を試しましたが、この質問に完全に答えるようなものはなく、実際には動作します。あなたの答えのすべてがHighCharts文書以内に答えられるように思わ

$(function() { 
    // Create the chart 
    Highcharts.setOptions({ 
    colors: ['#26d248', '#323232'] 
}); 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'summoner-pie-container', 
      type: 'pie', 
      backgroundColor:'transparent' 

     }, plotOptions: { 

     series: { 
      marker: { 
       states: { 
        hover: { 
         enabled: false 
        } 
       } 
      } 
     }, 

     pie: { 
      borderWidth: 0 
     } 
    }, 


     title: { 
text: '', 
style: { 
    display: 'none' 
} 
}, credits: { 
    enabled: false 
}, exporting: { 
    buttons: { 
     contextButton: { 
      enabled: false 
     }  
    } 
    }, 
    tooltip: { 
      formatter: function() { 
       return '<b>'+ this.point.name +'</b>: '+ this.y; 
      } 
     }, 
     series: [{ 
      data: [["Damage Dealt",34000],["Team Damage Dealt",86423]], 
      size: '60px', 
      innerSize: '70%', 
      dataLabels: { 
       enabled: false 
      } 
     }] 
    }); 


}); 

Answer 1

：ここ

は、私が持っているコードです。たとえば、次のページを参照してください。HighCharts Documentation on Style。

スタイルはJavascriptでcamelの場合（background-colorはbackgroundColorなど）にアクセスされるので、font-familyはfontFamilyになります。

あなたがチャートの上にカスタム要素を描画するレンダリングを使用することができます

Highcharts.setOptions({ 
chart: { 
    style: { 
     fontFamily: 'helvetica' 
    } 
} }); 

Answer 2

： http://api.highcharts.com/highcharts/Renderer

あなたは、そのスタイルを変更するSVG要素のCSS方式を使用することができます。 http://api.highcharts.com/highcharts/Element.css

例：

// Render chart 
var chart = Highcharts.chart(options); 

// Create custom text element 
var text = chart.renderer.text('100%').add(), 
    textBBox = text.getBBox(), 
    x = chart.plotLeft + (chart.plotWidth * 0.5) - (textBBox.width * 0.5), 
    y = chart.plotTop + (chart.plotHeight * 0.5) + (textBBox.height * 0.25); 
// Set position and styles 
text.attr({ x: x, y: y }).css({ fontSize: '13px', color: '#666666' }).add(); 

ライブ例：https://jsfiddle.net/zLhwqnq2/