javascript - Comment puis-je changer les couleurs de mon graphique de création de graphiques?

Translate

J'utilise des highcharts pour créer un graphique à la pièce mais j'ai du mal à 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 n'utilise que la palette de couleurs par défaut.

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

This question and all comments follow the "Attribution Required."

Toutes les réponses

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

Regardez l'exemple suivanthttp://jsfiddle.net/8QufV/

La source
Translate

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

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

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']});
La source
Translate

Pour répondre à la question de @Loko Web Designhttps://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 simplement les changer et voir quels changements, mais ce serait bien d'avoir cette référence disponible quelque part.

Les documents couleur sont disponiblesici. Bien qu'utiles, ils ne décrivent pas ce que fait réellement changer une couleur spécifique. Voici ma meilleure description.

L'accessoire de couleurs donne à Highcharts les couleurs sur lesquelles vous souhaitez que le graphique passe en boucle. Par exemple, si vous aviez l'accessoire de couleur suivant.

colors: ['blue', 'green']

Vos tranches de tarte alterneraient entre le bleu et le vert. En changeant le bleu en rouge, vos couleurs alterneront alors entre le rouge et le vert. Testez-le avec les éléments suivantsviolon

Le développement 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.

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

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 ce serait bien d'avoir cette référence disponible quelque part.

La source
Translate

J'ai eu le même problème. Dans highcharts.css, il y a une section appelée "Couleurs par défaut". Après avoir supprimé cette section, je pourrais 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.

La source
Translate

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

Dans les graphiques élevés, nous avons des couleurs intégrées. Vous devez donc changer le chemin de la couleur [0] ou [1] ........ [6]

La source
Leave a Reply
You must be logged in to post a answer.
A propos de l'auteur