Comment puis-je changer les couleurs de mon graphique circulaire highcharts ?

Question

Je suis en train d'utiliser highcharts pour créer un graphique en secteurs mais j'ai du mal à charger un jeu de couleurs personnalisé pour mon graphique.

Voici mon code:

     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({

        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },

        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' liens';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Part de marché des navigateurs',
            data: data
        }]
    });
    });

Mon graphique en secteurs fonctionne avec ce code mais il utilise seulement la palette de couleurs par défaut.

Comment spécifier un jeu de couleurs personnalisé?

Answer 1

Highcharts.setOptions({
 couleurs: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

Regardez l'exemple suivant http://jsfiddle.net/8QufV/

Answer 2

Pour ceux d'entre vous qui préfèrent initialiser la couleur dans les configurations, vous pouvez simplement mettre les couleurs dans la portion plotOptions de l'objet de configuration comme suit :

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...

Answer 3

Je pense que ce que vous devez faire est de définir les couleurs en utilisant le thème au lieu de setOptions comme suit :

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});

Answer 4

Pour répondre à la question de @Loko Web Design https://stackoverflow.com/a/38794379/7475250

Existe-t-il une page web indiquant à quoi correspond chacune des "couleurs"? Toutes les réponses ici montrent quelque chose comme:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

Mais que font en réalité #333, #CB2326, etc.? Je peux bien sûr les changer et voir ce qui change, mais il serait bon d'avoir cette référence disponible quelque part.

La documentation des couleurs est disponible ici. Bien qu'utile, elle ne décrit pas ce que le changement d'une couleur spécifique fait réellement. Ci-dessous se trouve ma meilleure description.

La propriété colors donne à Highcharts les couleurs que vous souhaitez que le graphique parcourt. Par exemple, si vous aviez la propriété de couleur suivante.

colors: ['blue', 'green']

Vos tranches de tarte alternent alors entre bleu et vert. En changeant le bleu en rouge, vos couleurs alternent alors entre rouge et vert. Testez-le avec ce fiddle

Étendre la liste des couleurs augmente le nombre de couleurs avant de recommencer.

colors: ['blue', 'green', 'yellow']

Répéterait les couleurs si plus de 4 tranches sont présentes dans votre jeu de données.

Answer 5

Highcharts.setOptions({
 couleurs: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
});