it-swarm.com.de

Wie kann ich verhindern, dass meine gestapelten Serien in umgekehrter Reihenfolge angezeigt werden?

Ich habe ein Beispiel für gestapelte Serien auf JSFiddle versucht aber meiner Meinung nach werden Serien beim Stapeln umgekehrt:

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        }]
    });
});

Die erste Linie in Blau sollte zuerst gezeichnet werden (Januar: 29,9) und die zweite sollte zu dieser hinzugefügt werden (Januar: 29,9 + 144 = 173,9).

Gibt es eine Möglichkeit, Serien im Stapel in die richtige Reihenfolge zu bringen?

22
keskispas

Sie können die Reihenfolge nach Index-Parametern ändern, die in der Serie eingestellt werden können.

http://jsfiddle.net/KLttA/

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        index:1
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
        index:0
    }]
26

Da dies das beste Ergebnis bei Google war, spart dies möglicherweise Zeit:

Die Variable yAxis hat einen Parameter reversedStacks (seit Version 3.0.10), der standardmäßig true ist. Um Stapel von unten aufzubauen, setzen Sie diese auf false. Legende und geteilte Tooltip-Artikelreihenfolge bleiben auf diese Weise korrekt.

http://jsfiddle.net/r5upptLo/

37
lionel

Sie können die serielegendIndexparameter verwenden: http://api.highcharts.com/highcharts#series.data.legendIndex

1
mt81

Eine andere Möglichkeit besteht darin, am Ende des Reihenarrays .reverse() hinzuzufügen, siehe Beispiel unter http://jsfiddle.net/sq9u6q5n/ .

0
Jfly