web-dev-qa-db-fra.com

Comment éviter que ma série empilée soit en ordre inverse?

J'ai essayé un exemple de série empilée sur JSFiddle mais selon moi, les séries sont inversées lorsqu'elles sont empilées:

$(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]
        }]
    });
});

La première ligne en bleu devrait être tracée en premier (29,9 en janvier), et la deuxième devrait être ajoutée à celle-ci (29,9 + 144 = 173,9 en janvier).

Existe-t-il un moyen de placer les séries dans le bon ordre lorsqu'elles sont empilées?

javascriptindexinghighchartsseriesstacked
22
keskispas

Vous pouvez modifier le paramètre order by index qui peut être défini en série.

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
Sebastian Bochan

Comme c’était le meilleur résultat de Google, cela fait peut-être gagner du temps à certains:

La yAxis a un paramètre reversedStacks (depuis la version 3.0.10), qui est true par défaut. Pour construire des piles de bas en haut, définissez ceci sur false. La légende et l'ordre des info-bulles partagées restent corrects de cette façon.

http://jsfiddle.net/r5upptLo/

37
lionel

Vous pouvez utiliser le paramètre legendIndex de la série: http://api.highcharts.com/highcharts#series.data.legendIndex

1
mt81

Une autre façon de procéder consiste à ajouter .reverse() à la fin du tableau de la série. Voir l'exemple à http://jsfiddle.net/sq9u6q5n/ .

0
Jfly