Come posso cambiare i colori del mio grafico a barre alte?

Sto utilizzando i diagrammi elevati per creare un grafico a torta, ma ho problemi a caricare un set di colori personalizzato per il mio grafico.Come posso cambiare i colori del mio grafico a barre alte?

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>

mio grafico a torta lavora con questo codice, ma utilizza solo la paletta colore predefinito.

Come si specifica un set di colori personalizzato?

fonte

2012-04-04 Sreenath Plakkat

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

Guarda il seguente esempio http://jsfiddle.net/8QufV/

fonte

2012-04-09 14:30:05

Ho provato questo ma, il mio colore della legenda si sta cambiando ma il colore del grafico a torta non cambia. – Rohitesh

Penso che quello che dovete fare è impostare i colori usando tema invece di setOptions come segue:

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

fonte

2012-04-04 13:35:22 Linger

Se si passa a [Pie Chart Demo] (http://www.highcharts.com/demo/pie-basic/grid) e quindi si fa clic su "Visualizza tema visivo", vedrete come manipolare l'intero tema. – Linger

hi Todd non cambia il colore usando il tuo codice precedente. Continuiamo a mostrare i colori di default del grafico a torta –

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

fonte

2013-07-30 18:12:01 min2bro

C'è una pagina web che dice a cosa corrispondono tutti i "colori"? Tutte le risposte qui mostrano qualcosa di simile:

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

ma cosa # 333, # CB2326, ecc in realtà cambiare? Ovviamente posso solo cambiarli e vedere cosa cambia, ma sarebbe bello avere questo riferimento disponibile da qualche parte.

fonte

2016-08-05 16:59:21

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

fonte

2016-11-25 11:23:55 bugovicsb

Highcharts.Color (Highcharts.getOptions(). I colori [0]). SetOpacity (0,5) .get ('RGBA')]

In alte classifiche colori incorporati che abbiamo. Quindi devi cambiare il percorso del colore [0] o [1] ........ [6]

fonte

2017-02-10 12:51:06 Kondal

Per quelli di voi che preferiscono per inizializzare il colore nelle file di configurazione, si può semplicemente mettere i colori nella parte 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

2017-05-01 00:00:43

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

C'è una pagina Web che dice a cosa corrispondono i "colori"? Tutte le risposte qui mostrano qualcosa del tipo:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 
Ma cosa cambiano effettivamente le opzioni # 333, # CB2326, ecc.? Ovviamente posso solo cambiarli e vedere cosa cambia, ma sarebbe bello avere questo riferimento disponibile da qualche parte.

I documenti colore sono disponibili here. Sebbene utili, non descrivono ciò che effettivamente cambia un colore specifico. Di seguito è la mia descrizione migliore.

L'opzione colori offre a Highcharts i colori che si desidera siano attraversati dal grafico. Per esempio se avessi il seguente colore prop.

colors: ['blue', 'green']

Le sezioni di torta si alternano tra blu e verde. Cambiando il blu al rosso i colori si alternerebbero tra rosso e verde. Provalo con il seguente fiddle

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

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

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

fonte

2017-09-26 19:28:05 BJax

Come posso cambiare i colori del mio grafico a barre alte?

risposta

Problemi correlati