Grafico a ciambella a 3 strati in Highcharts

Question

Highcharts supporta i grafici ad anello, essenzialmente un grafico a torta interno con una seconda torta --- mostrata come una ciambella --- che la circonda. donut chart from the Highcharts demo site

È possibile creare un grafico a ciambella a tre strati, vale a dire un grafico con una torta al centro, una ciambella che circonda la torta e un'altra ciambella che circonda la prima?

Sospetto che non sia possibile, poiché la loro opzione plotOptions.pie.innerSize suggerisce che supportano solo una dimensione interna e una dimensione esterna, non una dimensione interna, una dimensione media e una dimensione esterna. Ma forse mi manca qualcosa.

Answer 1

Basta tenta di impostare più serie, e giocare un po 'con dimensioni e formato interno, si veda: 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

È possibile fare lo stesso utilizzando due grafici.

un grafico avrà una torta e una ciambella mentre il secondo avrà solo un grafico ad anello è possibile gestirli fornendo lo stesso centro e raggio in modo che si sincronizzino.

speranza che questo lavoro per voi

Answer 3

un metodo diverso per raggiungere questo obiettivo è utilizzare il Tipo di serie Sunburst (Highcharts 6.0.0 o successivo).

Qui si specificano i dati con un parametro id se devono avere serie sotto di essi e per i bambini si specifica un parametro parent.

Per esempio (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 
     }] 
    }); 
}); 

O vedere this very elaborate example of world population per il suo potenziale.