Highcharts donut graphique sans camembert intérieur?

J'ai été la recherche de la solution pour générer le plus simple beignet graphique avec Highcharts de la bibliothèque. Cependant, tous les exemples de Highcharts montrer le style de graphique avec les deux camembert intérieur et à l'extérieur de beignet (reportez-vous à: http://www.highcharts.com/demo/pie-donut)

Comment puis-je me débarrasser de l'intérieur de la tarte et il suffit de garder l'extérieur de beigne, à l'instar d'autres bibliothèques? (quelque chose comme RGraph: http://www.rgraph.net/examples/donut.html)

Merci.

InformationsquelleAutor Jonathan Chen | 2012-07-26
  1. 91

    Vous avez juste besoin de fournir les données dans un tableau de deux éléments (clé /valeur) des tableaux. Spécifier un innerSize pour obtenir le beignet de style.

    Afin que vos paramètres va contenir quelque chose comme ceci:

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

    Voici un jsFiddle d'un exemple complet.

    • Merci, c'est simple et intelligent!
    • Je vous remercie. Cela m'aide beaucoup!
    • après presque 2hour la recherche d'un bug dans mon code graphique, la lecture de cette réponse me fait trouver la j'ai mispeled 'innersize" lorsque le bon est "innerSize'. C'est pourquoi, même sans rapport avec les problèmes peuvent être résolus par la recherche de réponses sur stackoverlow. merci!
    InformationsquelleAutor andypaxo
  2. 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();
    });
});
    InformationsquelleAutor Khandad Niazi
  3. 0

    Ce fut le top résultat de la recherche et les réponses données ne fonctionne pas pour moi. J'avais besoin de plus de contrôle sur les points de données que dans un simple tableau de tableaux. J'ai besoin d'utiliser des objets JSON pour configurer des options supplémentaires, comme les couleurs explicites pour des données spécifiques. J'ai trouvé par le biais des recherches que vous n'avez pas à modifier votre format de données à tous. Tout ce que vous avez à faire afin de faire un graphique dans un beignet graphique est juste de définir une innerSize valeur supérieure à 0 dans la série de données.

    De la highcharts documentation:

    innerSize: La taille du diamètre intérieur de
    la tarte. Une taille plus grande que 0 rend un donut graphique. Peut être un
    pourcentage ou en valeur de pixel. Les pourcentages sont relatifs à la tarte à la taille.
    Les valeurs de pixels sont donnés comme des nombres entiers.

    De sorte que vous pouvez obtenir un simple beignet graphique avec des données comme suit:

            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

    InformationsquelleAutor Jon Dysinger