Highcharts: aggiungere colori diversi la leggenda in una serie istogramma

Ho codice di esempio per domanda qui: http://jsfiddle.net/pzamora/ztxPr/1/Highcharts: aggiungere colori diversi la leggenda in una serie istogramma

Ho diversi colori nella mia serie, però ho bisogno loro di comparire nella legenda

series: [{ name: 'V Genes', 
     data: 
     [ 
      { 
       count: 18320.0, 
       y: 0.92, 
       color: '#3D96AE' 
      }, 
      { 
       count: 1337.0, 
       y: 0.17, 
       color: '#3D96AE' 
      }, 
      { 
       count: 33970.0, 
       y: 1.71, 
       color: '#4572A7' 
      }, 
      { 
       count: 1221.0, 
       y: 1.06, 
       color: '#3D96AE' 
      }, 
      { 
       count: 22073.0, 
       y: 1.11, 
       color: '#4572A7' 
      }, 
      { 
       count: 8331.0, 
       y: 0.42, 
       color: '#3D96AE' 
      }, 
      { 
       count: 64974.0, 
       y: 3.27, 
       color: '#4572A7' 
      }, 
      { 
       count: 9532.0, 
       y: 0.48, 
       color: '#3D96AE' 
      }, 
      { 
       count: 18106.0, 
       y: 0.91, 
       color: '#4572A7' 
      } 
     ] 
    }]

..Io abbinato valori x con la posizione di categoria, ma io non sto ottenendo tutti i miei dati visualizzati sul grafico

@jsfiddle: http://jsfiddle.net/pzamora/phrP7/4/

fonte

2012-12-19 pzamora

Più guardo questo il più confuso che sono. Che aspetto dovrebbe avere il grafico? La roba 'TRBxxxx' non sembra essere qualcosa che puoi dividere. Per esempio se avessi TRBV10-1 e TRBV10-1 (VB) potrei vedere dove stai andando. C'è qualche comunanza tra gli elementi VB e non VB? Altrimenti, perché li stai creando insieme? In tal caso, creare due serie e quindi utilizzare la descrizione comando per mostrare VB e non VB con i colori della legenda per differenziare i 2 punti. – wergeld

Mi aspetto di ottenere questo http://uploadingit.com/file/view/d120kn4vwyu3b1bz/one_series.jpg – pzamora

@pzamora Prendi un malloppo la mia risposta aggiornata, stavo per inviare la mia risposta all'altra domanda che hai chiesto quando hai cancellato esso. –

Si potrebbe fare le seguenti:

dati divisi in due serie
Aggiungere color per la leggenda in ogni serie

Aggiungi x parametro ad ogni valore in modo che non si sovrappongano

series: [{ name: 'X Genes', color: '#3D96AE', 
    data: 
    [ 
     { 
      count: 18320.0, 
      y: 0.92, 
      color: '#3D96AE', 
      x: 0 
     }, 
     { 
      count: 1337.0, 
      y: 0.17, 
      color: '#3D96AE', 
      x: 1 
     }, 
     { 
      count: 1221.0, 
      y: 1.06, 
      color: '#3D96AE', 
      x: 3 
     }, 
     { 
      count: 8331.0, 
      y: 0.42, 
      color: '#3D96AE', 
      x: 5 
     }, 
     { 
      count: 9532.0, 
      y: 0.48, 
      color: '#3D96AE', 
      x: 7 
     } 
    ] 
}, 
{ name: 'V Genes', color: '#4572A7', 
    data: 
    [ 
     { 
      count: 33970.0, 
      y: 1.71, 
      color: '#4572A7', 
      x: 2 
     }, 
     { 
      count: 22073.0, 
      y: 1.11, 
      color: '#4572A7', 
      x: 4 
     }, 
     { 
      count: 64974.0, 
      y: 3.27, 
      color: '#4572A7', 
      x: 6 
     }, 
     { 
      count: 18106.0, 
      y: 0.91, 
      color: '#4572A7', 
      x: 8 
     } 
    ] 
}]

Aggiungere stacking: 'normal al plotOptions in modo che i valori si trovino nel mezzo di ciascuna colonna.
```
plotOptions: { 
     column: { 
      cursor: 'pointer', 
      stacking: 'normal' 
     } 
}, 
```

fonte

2012-12-19 22:05:03 Lando

Sono felice con i colori, tuttavia non li sto ancora leggendo. Potrei voler dividere i dati in due serie e riempire i dati mancanti con valori vuoti per abbinare le categorie. – pzamora

Pensavo volessi colorare la legenda di ogni punto. Ho aggiornato la risposta per riflettere il grafico che hai postato, è questo di cui hai bisogno? – Lando

La posizione 'x' indica l'ordine in cui appariranno le colonne, ad esempio' x: 0' sarà il primo, 'x: 1' il secondo e così via. Dato che hai due serie, potresti avere 2 colonne con lo stesso 'x' e sarebbero mostrate insieme. – Lando

Una serie nella legenda può avere un solo colore mentre ogni punto di una serie può superare questo colore (come è stato fatto nel codice). Se desideri più dati nella tua legenda, potresti dividere la tua singola serie in più con i codici che desideri. Non è completamente chiaro quale sia il risultato previsto per questa domanda.

fonte

2012-12-19 20:58:14 wergeld

qui il codice con 2 serie http://jsfiddle.net/pzamora/phrP7/1/ Il problema è che il mio x Axis è diverso, i valori di ogni serie non corrispondono alle categorie xAxis – pzamora

: ['TRBV10-1 ',' TRBV11-1 ',' TRBV11-3 ',' TRBV10-3 (Vb 12) ',' TRBV11-2 (Vb 21.3) ',' TRBV12-3 (Vb 8) '] Ho due tipi dei valori xAxis, quelli con parentesi, e gli altri, voglio solo fare la differenza, se uso due serie i valori in xAxis non corrisponderanno mai in ogni serie – pzamora

ecco perché il mio motivo per usare una serie, tutti i valori x sono diversi vogliono solo far notare che alcuni di loro hanno una descrizione speciale – pzamora

Per ogni elemento leggenda è necessario creare una serie.
Quindi se vuoi due elementi devi creare 2 serie.
Quindi è necessario impostare il valore x per ciascun punto, per rendere lo stack di colonne sulla categoria.

demo

Quindi, se ho la seguente categoria:

['first', 'second', 'third']

mia serie devono avere i seguenti dati:
Serie1: [{count: 400, y: 10, x: 1}]
serie2: [{count: 300, y: 5, x: 0}, {count: 500, y: 15, x: 2}]

Questo caso serie 1 appare su second e serie 2 su first e third.

demo

Riferimento

Serie data

Aggiornamento:

Aggiornato perché è un problema con le categorie. Succede perché il valore x deve essere un integer e non un string.

{ 
    y: 40, 
    x: 2, 
    count: 300 
}

demo

fonte

2012-12-19 23:37:01

series: [{ name: 'X Genes', color: '#3D96AE', 
     data: 
     [ 
      { 
       count: 18320.0, 
       y: 0.92, 
       x: 0 
      }, 
      { 
       count: 1337.0, 
       y: 0.17, 
       x: 1 
      }, 
      { 
       count: 1221.0, 
       y: 1.06, 
       x: 3 
      }, 
      { 
       count: 8331.0, 
       y: 0.42, 
       x: 5 
      }, 
      { 
       count: 9532.0, 
       y: 0.48, 
       x: 7 
      } 
     ] 
    }, 
    { name: 'V Genes', color: '#4572A7', 
     data: 
     [ 
      { 
       count: 33970.0, 
       y: 1.71, 
       x: 2 
      }, 
      { 
       count: 22073.0, 
       y: 1.11, 
       x: 4 
      }, 
      { 
       count: 64974.0, 
       y: 3.27, 
       x: 6 
      }, 
      { 
       count: 18106.0, 
       y: 0.91, 
       x: 8 
      } 
     ] 
    }]

Non è necessario specificare l'attributo colore per ogni punto se si specifica che per la serie.

JsFiddle Demo

fonte

2012-12-20 09:30:13

Highcharts: aggiungere colori diversi la leggenda in una serie istogramma

risposta

Problemi correlati