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

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

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

Mais que changent réellement #333, #CB2326, etc.? Bien sûr, je peux simplement les changer et voir ce qui change, mais il serait intéressant d'avoir cette référence disponible quelque part.

Answer 2

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, j'ai pu utiliser des couleurs personnalisées. De toute façon, je suppose que vous n'avez pas besoin de highcharts.css si vous utilisez la version v5.0.4 ou supérieure.

Answer 3

Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]

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