インナーパイのないハイチャートのドーナツチャート？

Question

私はHighchartsライブラリでもっとも単純なドーナツチャートを生成するソリューションを探していました。しかし、ハイチャートのすべての例では、内側パイと外側ドーナッツの両方のグラフのスタイルが表示されます（http://www.highcharts.com/demo/pie-donut参照）

内側のパイを取り除き、他のライブラリと同様に外側のドーナツを保つにはどうしたらいいですか？ （RGraphのようなもの：http://www.rgraph.net/examples/donut.html）

ありがとう。

Answer 1

データを2つの要素（キー/値）配列の配列として指定するだけで済みます。ドーナツスタイルを取得するにはinnerSizeを指定します。

... 
data: [["Firefox",6],["MSIE",4],["Chrome",7]], 
innerSize: '20%', 
... 

がここに jsFiddle of a complete exampleです：

だからあなたのパラメータは、次のようなものが含まれます。

Answer 2

**I hope this example of highchat will solve your problum 

http://jsfiddle.net/e2qpa/3/ 

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 

     plotOptions: { 
      pie: { 
       borderColor: '#000000', 
       innerSize: '60%' 
      } 
     }, 
     series: [{ 
      data: [ 
       ['Firefox', 44.2], 
       ['IE7', 26.6], 
       ['IE6', 20], 
       ['Chrome', 3.1], 
       ['Other', 5.4] 
       ]}] 
    }, 
    // using 

    function(chart) { // on complete 

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

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

    // Render the text 
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).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(); 
    }); 
}); 

Answer 3

これはトップ検索結果であり、回答は私にとってはうまくいかなかった。単純な配列の配列よりもデータポイントのコントロールが必要でした。 JSONオブジェクトを使用して、特定のデータに明示的な色などの追加オプションを設定する必要がありました。私はいくつかの調査を通じて、データフォーマットをまったく変更する必要がないことを発見しました。円グラフをドーナツチャートにするために必要なのは、データ系列でinnerSize値を0より大きく設定することだけです。

innerSize： パイのための内径の大きさhighchartsのドキュメントから

。 0より大きいサイズは、ドーナツチャートをレンダリングします。 の割合またはピクセル値になります。パーセンテージは円のサイズに関連しています。 ピクセル値は整数で与えられます。

ですから、次のようなデータを持つシンプルなドーナツグラフを得ることができます。

 series: [{ 
      innerSize: '30%', 
      data: [ 
       {name: 'Yellow Slice', y: 12, color: 'yellow'}, 
       {name: 'Red Slice', y: 10, color: 'red' }, 
       {name: 'Blue Slice', y: 33, color: 'blue'}, 
       {name: 'Green Slice', y: 20, color: 'green'} 
      ] 
     }] 

JS Fiddle