Warum kehrt HighCharts die Reihenfolge meiner Serie um?

Question

Ich verwende HighCharts, um ein gestapeltes horizontales Balkendiagramm in Prozent darzustellen. Es funktioniert hervorragend, außer HighCharts kehrt die Reihenfolge meiner Seriendaten standardmäßig um.

http://jsfiddle.net/U8nZ6/

Wie Sie in der Demo, trotz $ 20k ist die erste Zeile der data1/Daten2 Array sehen können, ist es das letzte Stück von jeder Stange (den ganzen Weg auf der rechten Seite). Ich möchte, dass dies in Ordnung ist, also habe ich ein paar Dinge ausprobiert:

1) Rendern Sie das Diagramm mit dem Array .reverse() d. Sie können diese Zeilen in der obigen Demo aktivieren, um zu sehen, dass das Ergebnis darin besteht, dass Farben nicht in einer Reihe stehen, da es in jedem Diagramm eine unterschiedliche Anzahl von Datensätzen gibt. Dies funktioniert nicht (und sollte nicht das einzige sein) Möglichkeit, dies zu tun, bin ich sicher)

2) Verwenden Sie xAxis.reversed = true. Dadurch werden die Farben in die richtige Reihenfolge gebracht, aber die Legende wird umgekehrt (100% bis 0%) und animiert von rechts nach links.

Gibt es einen anderen Weg?

Answer 1

Nun, vorausgesetzt, es gibt keine Alternative, hier ist, was ich mit ging falls jemand stolpert dies durch Google:

Verwendung der Option 2 oben beschrieben (Umkehrung der Achse), habe ich einfach die Etiketten über das Formatierungsprogramm geändert werden das Gegenteil.

In meinem Fall, da es Prozentsatz (0-100), habe ich einfach:

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

Answer 2

Ich hatte ein ähnliches Problem. Nachdem ich verschiedene Optionen ausprobiert habe, habe ich den Serienindex vor dem Rendern des Diagramms eingestellt. Generischer Code:

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; 
    } 
} 

Aktualisiert jsFiddle für Ihr Beispiel: http://jsfiddle.net/U8nZ6/23/

Answer 3

Es sieht aus wie es eine Option namens reverseStacks (http://api.highcharts.com/highcharts#yAxis.reversedStacks), die standardmäßig auf true für gestapelte Diagramme. Möglicherweise möchten Sie dies in Ihrem Code auf false setzen.

Ich habe festgestellt, dass Ihr JSFiddle speziell Highcharts Version 2.3.5 anfordert, in der diese Option vermutlich nicht vorhanden ist.

Answer 4

Falls jemand noch danach sucht. Ich benutzte umgekehrt: true in meiner Legende.

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! 
     }