javascript - Come posso cambiare i colori del mio diagramma a blocchi highcharts?

Translate

Sto usando highcharts per creare un grafico a torta, ma ho problemi a caricare un set di colori personalizzato per il mio grafico.

Ecco il mio codice:

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

Il mio grafico a torta funziona con questo codice ma utilizza solo la tavolozza dei colori predefinita.

Come si specifica un set di colori personalizzato?

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

Tutte le risposte

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

Guarda il seguente esempiohttp://jsfiddle.net/8QufV/

fonte
Translate

Per quelli di voi che preferiscono inizializzare il colore nelle configurazioni, potete semplicemente mettere i colori nella porzione plotOptions dell'oggetto di configurazione in questo modo:

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

Penso che quello che devi fare sia impostare i colori usando theme invece di setOptions come segue:

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

Per rispondere alla domanda di @Loko Web Designhttps://stackoverflow.com/a/38794379/7475250

Esiste una pagina web che dice a cosa corrisponde ciascuno dei "colori"? Tutte le risposte qui mostrano qualcosa come:

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

Ma cosa cambiano effettivamente # 333, # CB2326, ecc.? Ovviamente posso semplicemente cambiarli e vedere cosa cambia, ma sarebbe bello avere questo riferimento disponibile da qualche parte.

I documenti a colori sono disponibiliQui. Sebbene utili, non descrivono cosa fa effettivamente cambiare un colore specifico. Di seguito è la mia migliore descrizione.

L'elica dei colori fornisce ad Highcharts i colori che desideri vengano visualizzati nel grafico. Ad esempio, se avessi il seguente colore di scena.

colors: ['blue', 'green']

Le tue fette di torta si alternerebbero tra il blu e il verde. Cambiando il blu in rosso, i tuoi colori si alterneranno tra rosso e verde. Provalo con quanto segueviolino

L'espansione dell'elenco dei colori aumenta il numero di colori prima della ripetizione.

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

Ripetere i colori se nel set di dati sono presenti più di 4 sezioni.

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

Esiste una pagina web che dice a cosa corrisponde ciascuno dei "colori"? Tutte le risposte qui mostrano qualcosa come:

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

Ma cosa cambiano effettivamente # 333, # CB2326, ecc.? Ovviamente posso semplicemente cambiarli e vedere cosa cambia, ma sarebbe bello avere questo riferimento disponibile da qualche parte.

fonte
Translate

Ho avuto lo stesso problema. In highcharts.css c'è una sezione chiamata "Colori predefiniti". Dopo aver eliminato questa sezione, potrei usare colori personalizzati. Ad ogni modo, immagino che non sia necessario highcharts.css se si utilizza la versione v5.0.4 o successiva.

fonte
Translate

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

Nelle classifiche alte abbiamo colori incorporati. Quindi è necessario modificare il percorso del colore [0] o [1] ........ [6]

fonte
Leave a Reply
You must be logged in to post a answer.
Circa l'autore