Dlaczego HighCharts odwraca kolejność moich serii?

Question

Używam HighCharts do renderowania ułożonego procentowo poziomego wykresu słupkowego i działa świetnie, z tym że HighCharts domyślnie odwraca kolejność moich danych serii.

http://jsfiddle.net/U8nZ6/

Jak widać w demo, mimo $ 20k jest pierwszym wierszu tablicy dane1/dane2, to ostatni kawałek każdego słupka (całą drogę po prawej stronie). Chciałbym, żeby to było w porządku, więc spróbowałem kilku rzeczy:

1) Renderuj wykres z tablicą .reverse() d. Możesz włączyć te linie w powyższym demo, aby zobaczyć, że wynikiem tego jest to, że kolory nie są wyrównane, ponieważ na każdym wykresie jest inna liczba rekordów, więc to nie zadziała (i nie powinno być jedynym sposób to zrobić, jestem pewien)

2) Użyj xAxis.reversed = true. Ustawia to we właściwej kolejności kolory pasujące, ale legenda jest odwrócona (100% do 0%) i animuje od prawej do lewej.

Czy istnieje inny sposób obejścia tego?

Answer 1

Cóż, zakładając, że nie ma alternatywy, oto co ja poszedłem z w przypadku gdy ktoś potknie się na to przez Google:

Korzystanie z opcji 2 opisanego powyżej (cofania oś), po prostu zmodyfikowanym etykiety przez formater być odwrotność.

W moim przypadku, ponieważ jest to odsetek (0-100), po prostu umieścić:

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

Answer 2

miałem podobny problem. Po wypróbowaniu różnych opcji zakończyłem ustawianie indeksu serii przed renderowaniem wykresu. Kod Generic:

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

Updated jsFiddle dla przykładu: http://jsfiddle.net/U8nZ6/23/

Answer 3

Wygląda na to, że jest to opcja o nazwie reverseStacks (http://api.highcharts.com/highcharts#yAxis.reversedStacks), które domyślnie true dla ułożone wykresów. Możesz ustawić wartość false w swoim kodzie.

Zauważyłem, że Twój JSFiddle wyraźnie wymaga Highcharts w wersji 2.3.5, w której ta opcja prawdopodobnie nie istnieje.

Answer 4

Jeśli ktoś nadal tego chce. Użyłem w odwróceniu: true w mojej legendzie.

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