Come si cambia il colore di ciascuna categoria all’interno di un istogramma di colonne alte?

Ho un grafico a colonne che ha un numero di categorie, ognuna con un singolo punto dati (es. Come questo ). È ansible cambiare il colore della barra per ogni categoria? vale a dire che ogni barra avrebbe il suo colore unico piuttosto che tutto blu?

È inoltre ansible impostare il colore singolarmente per ogni punto / barra se si modifica l’array di dati in modo che siano oggetti di configurazione anziché numeri.

data: [ {y: 34.4, color: 'red'}, // this point is red 21.8, // default blue {y: 20.1, color: '#aaff99'}, // this will be greenish 20] // default blue 

Esempio su jsfiddle

inserisci la descrizione dell'immagine qui

Inoltre puoi impostare l’opzione:

  {plotOptions: {column: {colorByPoint: true}}} 

per maggiori informazioni leggi i documenti

Aggiungi i colors che desideri ai colors e quindi imposta colorByPoint su true .

 colors: [ '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ], plotOptions: { column: { colorByPoint: true } } 

dimostrazione

Riferimento:

Sì, ecco un esempio in jsfiddle: http://jsfiddle.net/bfQeJ/

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

L’esempio è un grafico a torta ma puoi semplicemente riempire la serie con tutti i colors per il contenuto del tuo cuore =)

È ansible aggiungere una serie di colors nel grafico a grafico alto per modificare il colore del grafico. Puoi riorganizzare questi colors e puoi anche specificare i tuoi colors.

 $('#container').highcharts({ colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'], chart: { type: 'column' }, title: { text: 'Stacked column chart' }, 

Come menzionato da antonversal, la lettura dei colors e l’uso dell’opzione colors durante la creazione dell’object grafico funziona.

 var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']}); 

Basta aggiungere questo … o è ansible modificare i colors secondo la vostra richiesta.

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

aggiungere proprietà:

  colors: ['Red', 'Bule', 'Yellow'] 

basta mettere il grafico

 $('#container').highcharts({ colors: ['#31BFA2'], // change color here chart: { type: 'column' }, .... Continue chart 

Questo ha funzionato per me. È noioso impostare tutte le opzioni di colore per una serie, specialmente se è dynamic

 plotOptions: { column: { colorByPoint: true } } 
 {plotOptions: {bar: {colorByPoint: true}}}