Grafico a ciambella Highcharts senza torta interna?

Question

Ho cercato la soluzione per generare il grafico a ciambella più semplice con la libreria Highcharts. Tuttavia, tutti gli esempi di diagrammi elevati mostrano lo stile del grafico con torta interna e ciambella esterna (fare riferimento a: http://www.highcharts.com/demo/pie-donut)

Come posso eliminare la torta interna e mantenere la ciambella esterna, proprio come fanno le altre librerie? (qualcosa come RGraph: http://www.rgraph.net/examples/donut.html)

Grazie.

Answer 1

Hai solo bisogno di fornire i dati come una matrice di due elementi (chiave/valore) matrici. Specificare un innerSize per ottenere lo stile ciambella.

Così i vostri parametri conterrà qualcosa di simile:

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

Ecco un 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

Questo è stato il risultato di ricerca principale e le risposte fornite non hanno funzionato per me. Avevo bisogno di un maggiore controllo sui punti dati rispetto a un semplice array di array. Avevo bisogno di usare oggetti JSON per configurare opzioni aggiuntive come i colori espliciti per dati specifici. Ho trovato attraverso alcune ricerche che non è necessario modificare il formato dei dati. Tutto quello che devi fare per creare un grafico a torta in un grafico ad anello è semplicemente impostare un valore innerSize maggiore di 0 nella serie di dati.

Dalla documentazione Highcharts:

innerSize: La dimensione del diametro interno per torta. Una dimensione maggiore di 0 esegue il rendering di un grafico ad anello. Può essere una percentuale di o valore di pixel. Le percentuali sono relative alla dimensione della torta. I valori dei pixel sono indicati come numeri interi.

in modo da poter ottenere un grafico ad anello semplice con i dati come il seguente:

 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