web-dev-qa-db-fra.com

Comment puis-je changer les couleurs de mon camembert en haut des graphiques?

J'utilise des graphiques en hauteur pour créer un diagramme en morceaux, mais je ne parviens pas à charger un jeu de couleurs personnalisé pour mon graphique.

Voici mon code: 

     <script type="text/javascript">
     $(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 + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

Mon graphique à secteurs fonctionne avec ce code, mais il utilise uniquement la palette de couleurs par défaut.

Comment spécifiez-vous un jeu de couleurs personnalisé?

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

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

77
Ricardo Alvaro Lohmann

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']});
7
Linger

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

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

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

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

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

Mais qu'est-ce que # 333, # CB2326, etc. changent réellement? Évidemment je peux juste changez-les et voyez quels changements, mais ce serait bien d'avoir ceci référence disponible quelque part.

Les couleurs sont disponibles ici . Bien qu'utiles, ils ne décrivent pas ce que change réellement une couleur spécifique. Ci-dessous ma meilleure description. 

Les propriétés des couleurs donnent à Highcharts les couleurs que vous souhaitez voir défiler dans le graphique. Par exemple, si vous aviez la couleur suivante:.

colors: ['blue', 'green']

Vos parts de tarte alterneraient entre le bleu et le vert. En changeant le bleu en rouge, vos couleurs alterneraient alors entre le rouge et le vert. Testez-le avec le fiddle suivant

L'élargissement de la liste de couleurs augmente le nombre de couleurs avant de répéter. 

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

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

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

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

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

Mais qu'est-ce que # 333, # CB2326, etc. changent réellement? Évidemment, je peux simplement les changer et voir quels changements, mais il serait bien d’avoir cette référence disponible quelque part.

1
Loko Web Design

J'ai eu le même problème. Dans highcharts.css, vous trouverez une section intitulée "Couleurs par défaut". Après avoir supprimé cette section, je pouvais utiliser des couleurs personnalisées. Quoi qu'il en soit, je suppose que vous n'avez pas besoin de highcharts.css si vous utilisez la version v5.0.4 ou supérieure.

0
bugovicsb

Highcharts.Color (Highcharts.getOptions (). Couleurs [0]). SetOpacity (0.5) .get ('rgba')]

Dans les cartes hautes couleurs intégrées nous avons. Il faut donc changer le chemin de la couleur [0] ou [1] ........ [6]

0
Kondal