Diagramma di ciambella ad alta sede senza torta interna?

Question

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

Come posso sbarazzarmi della torta interna e mantenere la ciambella esterna, proprio come fare altre biblioteche?(qualcosa come rgraph: http://www.rgraph.net/examples/donut.html)

Grazie.

Answer 1

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

Quindi i tuoi parametri conterranno qualcosa del genere:

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

.

Ecco un jsfiddle di un esempio completo .

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 principale risultato di ricerca e le risposte fornite non hanno funzionato per me.Avevo bisogno di più controllo sui punti dati rispetto a una semplice matrice di array.Avevo bisogno di utilizzare gli oggetti JSON per configurare opzioni aggiuntive come colori espliciti per dati specifici.Ho trovato qualche ricerca che non devi modificare affatto il tuo formato di dati.Tutto quello che devi fare per far sì che un grafico a torta in un grafico di ciambella è semplicemente impostare un valore innorsizzabile maggiore di 0 nelle serie di dati.

Dalla documentazione Highcharts:

.

Innerdizione: la dimensione del diametro interno per la crostata.Una dimensione superiore a 0 rende un grafico a ciambella.Può essere A. Valore percentuale o pixel.Le percentuali sono relative alla dimensione della torta. I valori dei pixel sono dati come numeri interi.

In modo da poter ottenere un semplice grafico a ciambella con dati come quanto segue:

        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 violino