Perché HighCharts inverte l'ordine delle mie serie?

Question

Sto utilizzando HighCharts per eseguire il rendering di un grafico a barre in percentuale orizzontale impilato, e funziona benissimo tranne che HighCharts inverte l'ordine dei dati della serie per impostazione predefinita.

http://jsfiddle.net/U8nZ6/

Come si può vedere nella demo, nonostante $ 20k essendo la prima riga della matrice data1/data2, è l'ultimo pezzo di ogni barra (tutta la strada a destra). Mi piacerebbe che fosse tutto in ordine, quindi ho provato un paio di cose:

1) Renderizza il grafico con l'array .reverse() d. Puoi abilitare quelle linee nella demo sopra per vedere che il risultato è che i colori non si allineano poiché c'è un diverso numero di record in ogni grafico, quindi questo non funzionerà (e non dovrebbe essere il solo modo per farlo, sono sicuro)

2) Utilizzare xAxis.reversed = true. Questo lo inserisce nel giusto ordine con la corrispondenza dei colori, ma poi la legenda viene invertita (dal 100% allo 0%) e si anima da destra a sinistra.

C'è un altro modo per aggirare questo?

Answer 1

Beh, supponendo che non c'è alternativa, ecco quello che ho passato con nel caso qualcuno si imbatte in questo tramite Google:

Utilizzando l'opzione 2 descritto in precedenza (invertendo l'asse), ho semplicemente modificato le etichette tramite il formattatore di essere l'inverso.

Nel mio caso, dal momento che è la percentuale (0-100), ho semplicemente messo:

labels: { formatter: function() { return Math.abs(this.value - 100) } }

Answer 2

Ho avuto un problema simile. Dopo aver provato diverse opzioni ho finito per impostare l'indice delle serie prima di rendere il grafico. codice generico:

if (options.chart.type === 'bar') { 

    for (var i = 0; i < options.series.length; i++) { 
     options.series[i].index = options.series.length - 1 - i; 
     options.series[i].legendIndex = i; 
    } 
} 

Aggiornato jsFiddle per il tuo esempio: http://jsfiddle.net/U8nZ6/23/

Answer 3

Sembra che ci sia un opzione chiamata reverseStacks (http://api.highcharts.com/highcharts#yAxis.reversedStacks) che il default è vero per grafici in pila. Potresti voler impostare questo a false nel tuo codice.

Ho notato che il tuo JSFiddle richiede specificamente Highcharts versione 2.3.5, in cui presumibilmente questa opzione non è presente.

Answer 4

Nel caso qualcuno lo stia ancora cercando. Ho usato invertito: true nella mia legenda.

legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false, 
      reversed: true // right here! 
     }