ハイチャートの3層ドーナツチャート

Question

ハイチャートはドーナツチャートをサポートしています。 donut chart from the Highcharts demo site

3層のドーナツチャートを作成することはできますか？つまり、中央にパイと、パイを囲むドーナツと、最初のものを囲むドーナツを持つチャートですか？

plotOptions.pie.innerSizeオプションは内部サイズと中間サイズと外部サイズではなく、内部サイズと外部サイズのみをサポートすることを示唆しています。しかし、おそらく私は何かを見逃しています。

Answer 1

のために働くだけでより多くのシリーズを設定し、サイズと内側のサイズでしばらく遊ぶ、見てみ

希望：http://jsbin.com/oyudan/165/edit

 series: [{ 
      name: 'Browsers', 
      data: [11,23,14,15], 
      size: '40%', 
      dataLabels: { 
       formatter: function() { 
        return this.y > 5 ? this.point.name : null; 
       }, 
       color: 'white', 
       distance: -30 
      } 
     }, { 
      name: 'Versions', 
      data: [4,7,11,11,2,3,3,8,5,5,5], 
      size: '70%', 
      innerSize: '40%', 
      dataLabels: { 
       formatter: function() { 
        // display only if larger than 1 
        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; 
       } 
      } 
     }, { 
      name: 'Versions', 
      data: [2,2,3,4,6,5,6,5,1,1,2,1,2,1,4,4,2,3,2,3,2,3], 
      size: '80%', 
      innerSize: '70%', 
      dataLabels: { 
       formatter: function() { 
        // display only if larger than 1 
        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; 
       } 
      } 

Answer 2

2つのチャートを使用して同じことができます。

1つのグラフは円とドーナツを持っていますが、2番目のグラフはドーナツチャートしかありません 同じセンターと半径を同期させることでそれらを管理できます。これはあなた

Answer 3

これを達成するための別の方法が使用されますサンバーストシリーズ（ハイチャート6.0.0以降）

idパラメータを持つシリーズの場合はデータを指定し、指定する場合はparentパラメータを指定します。例えば

（JSFiddle、documentation）：

$(function() { 
    var data = [ 
     { 
      name: 'Anakin Skywalker', 
      id: 'father' 
     }, { 
      name: 'Luke Skywalker', 
      id: 'child-1', 
      parent: 'father', 
      value: 1 
     }, { 
      name: 'Leia Organa', 
      id: 'child-2', 
      parent: 'father', 
      value: 3 
     }, { 
      name: 'Ben Skywalker', 
      parent: 'child-1', 
      value: 1 
     }, { 
      name: 'Jaina Solo', 
      parent: 'child-2', 
      value: 1 
     }, { 
      name: 'Jacen Solo', 
      parent: 'child-2', 
      value: 1 
     }, { 
      name: 'Anakin Solo', 
      parent: 'child-2', 
      value: 1 
     } 
    ]; 

    $('#container').highcharts({ 
     chart: { 
      type: 'sunburst' 
     }, 
     title: { 
      text: 'Family tree' 
     }, 
     series: [{ 
      data: data 
     }] 
    }); 
}); 

またはその可能性についてthis very elaborate example of world populationを参照してください。