Graphique en beignet Highcharts sans tarte intérieure ?

Question

Je cherchais la solution pour générer le graphique en anneau le plus simple avec la bibliothèque Highcharts.Cependant, tous les exemples de Highcharts montrent le style de graphique avec à la fois un secteur intérieur et un anneau extérieur (voir : http://www.highcharts.com/demo/pie-donut)

Comment puis-je me débarrasser du gâteau intérieur et conserver le beignet extérieur, comme le font les autres bibliothèques ?(quelque chose comme RGraph : http://www.rgraph.net/examples/donut.html)

Merci.

Answer 1

Il vous suffit de fournir les données sous forme de tableau de deux tableaux d'éléments (clé/valeur).Spécifiez un innerSize pour obtenir le style beignet.

Vos paramètres contiendront donc quelque chose comme ceci :

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

Voici un jsFiddle d'un exemple complet.

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

C'était le résultat de la recherche en haut et les réponses données ne fonctionnaient pas pour moi.J'avais besoin de plus de contrôle sur les points de données que d'un simple tableau de matrices.J'avais besoin d'utiliser des objets JSON pour configurer des options supplémentaires telles que des couleurs explicites pour des données spécifiques.J'ai trouvé à travers des recherches que vous n'avez pas à modifier votre format de données.Tout ce que vous avez à faire afin de faire un graphique à tarte dans un diagramme de beignets consiste à définir une valeur d'aucune valeur supérieure à 0 dans la série de données.

de la documentation Highcharts:

Innersize: la taille du diamètre intérieur pour la tarte.Une taille supérieure à 0 rend un graphique de beignet.Peut être un Pourcentage ou valeur de pixel.Les pourcentages sont relatifs à la taille de la tarte. Les valeurs de pixels sont données comme entiers.

Vous pouvez donc obtenir un simple diagramme de beignets avec des données comme les suivantes:

        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