web-dev-qa-db-fra.com

Tableau des beignets Highcharts sans tarte intérieure?

J'ai cherché 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 une tarte intérieure et un beignet externe (voir: http://www.highcharts.com/demo/pie-donut )

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

Je vous remercie.

javascripthtml5highchartsdonut-chart
33
Jonathan Chen

Il vous suffit de fournir les données sous la forme d'un tableau de deux tableaux d'éléments (clé/valeur). Spécifiez un innerSize pour obtenir le style de 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 .

91
andypaxo
**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();
    });
});
2
Khandad Niazi

C'était le meilleur résultat de recherche 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 qu'un simple tableau de tableaux. J'avais besoin d'utiliser des objets JSON pour configurer des options supplémentaires comme des couleurs explicites pour des données spécifiques. J'ai trouvé grâce à certaines recherches que vous n'avez pas du tout à modifier votre format de données. Tout ce que vous avez à faire pour transformer un graphique à secteurs en graphique en anneau est de simplement définir une valeur innerSize supérieure à 0 dans la série de données.

De la documentation des highcharts:

innerSize: La taille du diamètre intérieur de la tarte. Une taille supérieure à 0 rend un graphique en anneau. Peut être un pourcentage ou une valeur en pixels. Les pourcentages sont relatifs à la taille du gâteau. Les valeurs en pixels sont données sous forme d'entiers.

Vous pouvez donc obtenir un simple graphique en anneau avec des données comme celles-ci:

        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

0
Jon Dysinger