it-swarm.it

Come si cambia il colore di ciascuna categoria all'interno di un istogramma a caratteri alti?

Ho un istogramma che ha un numero di categorie, ognuna con un singolo punto dati (ad es. come questo ). È possibile cambiare il colore della barra per ogni categoria? vale a dire quindi ogni barra avrebbe il suo colore unico piuttosto che essere tutta blu?

67

È inoltre possibile impostare il colore singolarmente per ciascun punto/barra se si modifica l'array di dati in 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

enter image description here

100
eolsson

Inoltre puoi impostare l'opzione:

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

per maggiori informazioni leggi docs

58
antonversal

Aggiungi quali colori vuoi colors e quindi imposta colorByPoint su true.

colors: [
'#4572A7', 
'#AA4643', 
'#89A54E', 
'#80699B', 
'#3D96AE', 
'#DB843D', 
'#92A8CD', 
'#A47D7C', 
'#B5CA92'
],

plotOptions: {
    column: {
        colorByPoint: true
    }
}

demo

Riferimento:

25

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 colori a tuo piacimento =)

13
Allen Liu

È possibile aggiungere una matrice di colori nel grafico ad alto grafico per modificare il colore del grafico. Puoi riorganizzare questi colori e puoi anche specificare i tuoi colori.

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

Come menzionato da antonversal, la lettura dei colori e l'utilizzo dell'opzione colors durante la creazione dell'oggetto grafico funzionano.

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

Basta aggiungere questo ... oppure puoi cambiare i colori secondo la tua richiesta.

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

    });
1
V.Ahlawat

basta mettere il grafico

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

aggiungi proprietà:

 colors: ['Red', 'Bule', 'Yellow']
0
Tran Anh Hien

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

plotOptions: {
  column: {
   colorByPoint: true
  }
}
0
Leo Rams