web-dev-qa-db-fra.com

HighCharts - Faire le graphique à secteurs 100% de la div

Comment puis-je faire un pie remplissage du graphique 100% du divil est contenu dans? div a une largeur de 198px et sa hauteur est 152px.

De plus, j'aimerais avoir un linear-gradient effet à l'intérieur de chaque part de tarte, pouvez-vous me conseiller sur la façon de procéder?

enter image description here

javascripthighcharts
36
Alon

Vous pouvez atteindre la hauteur totale du graphique à secteurs en définissant l'attribut size dans le plotOptions du graphique et en supprimant margins, spacing et titles du graphique.

Code 

    chart: {           
        margin: [0, 0, 0, 0],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    plotOptions: {
        pie: {
            size:'100%',
            dataLabels: {
                enabled: false
            }
        }
    }

Exemple (mise à jour du violon pour pointer vers la version 2.2.4)

Voici un exemple démontrant cela.

Quant aux gradients linéaires, je ne sais pas s'ils ont encore été implémentés, mais voici un exemple montrant les gradients radiaux.

Les dégradés radiaux font également partie de Highcharts 3.0 maintenant, voici un exemple

Mise à jour

On dirait qu'à partir de Highcharts 3.0, cela n'est plus possible en raison de la mise à l'échelle automatique du graphique dans la zone de traçage, un extrait de leur documentation:

taille: Le diamètre de la tarte par rapport à la zone de traçage. Peut être un pourcentage ou une valeur en pixels. Les valeurs en pixels sont données sous forme d'entiers. Le comportement par défaut (à partir de la version 3.0) consiste à mettre à l'échelle la zone de traçage et à laisser de la place aux étiquettes de données dans la zone de traçage. Par conséquent, la taille de la tarte peut varier lorsque les points sont mis à jour et les étiquettes de données plus proches. Dans ce cas, il est préférable de définir une valeur fixe, par exemple "75%". Par défaut à.

à mon avis, cela ne devrait pas être le cas puisque dataLabels sont désactivés. devrait probablement être enregistré en tant que bug

Mise à jour (août 2014)

Selon Torstein's commentaire, cela est en effet toujours possible. slicedOffset doit être défini sur 0 en plus des marges commencent à définir. ( exemple )

$(function () {
    $('#container').highcharts({
        title: null,
        chart: {
            type: 'pie',
            margin: 0
        },
        
        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
            }
        },
        
        series: [{
            data: [
                ['Firefox',   44.2],
                ['IE7',       26.6],
                ['IE6',       20],
                ['Chrome',    3.1],
                ['Other',    5.4]
            ]
        }]
    });
});
#container {
    outline: 1px solid red;
    padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
78
epoch