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?

fonte

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

Tutte le risposte

Ricardo Alvaro Lohmann

Translate

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

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

fonte

Ali Yazdani

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

Linger

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

BJax

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

min2bro

Translate

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

fonte

Loko Web Design

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

bugovicsb

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

Kondal

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

You must be logged in to post a answer.

Circa l'autore

Sreenath Plakkat

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

Tutte le risposte

Leave a Reply

Circa l'autore

Problemi simili

Category