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é?

La source

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

Toutes les réponses

Ricardo Alvaro Lohmann

Translate

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

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

La source

Ali Yazdani

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

Linger

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

BJax

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

min2bro

Translate

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

La source

Loko Web Design

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

bugovicsb

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

Kondal

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

You must be logged in to post a answer.

A propos de l'auteur

Sreenath Plakkat

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

Toutes les réponses

Leave a Reply

A propos de l'auteur

Problèmes similaires

Category