web-dev-qa-db-fra.com

Highcharts - Modifier l'ordre des index de légende

Lors de la création d'un graphique avec des colonnes empilées à l'aide de Highcharts, mes séries sont ajoutées par défaut de haut en bas - la première série ajoutée est placée en haut. J'aimerais modifier ce comportement afin que la dernière série ajoutée soit au top. J'ai essayé de modifier les options d'index et zIndex, mais les éléments de la légende ont également été réorganisés. Voici un exemple simple: http://jsfiddle.net/6bCBf/7/ .

$(function () {

    var chart = new Highcharts.Chart({

        chart: {
            type: 'column',
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },

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

        series: [
            {
                name: 'base',
                data: [10, 20, 30],
                index:25,
                zIndex:10
            },
            {
                name: 'sec',
                data: [30, 20, 10],
                index:1,
                zIndex:9
            }
        ]
    });   
});

Est-il possible de changer l'ordre des piles, mais garder l'ordre des légendes? J'aimerais juste que les légendes soient classées par ordre alphabétique, mais que les éléments du graphique soient ajoutés de bas en haut.

highcharts
13
syntax_error

Oui c'est tout à fait possible.

Ce que vous recherchez, c'est le paramètre appelé legendIndex .

Cela vous permettra de spécifier l'ordre des éléments dans la légende. donc être capable de changer les colonnes empilées et non les éléments de légende.

Par exemple, vous pouvez faire ce qui suit:

series: [
        {
            name: 'base',
            data: [10, 20, 30],
            index:1,
            legendIndex:0
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:0,
            legendIndex:1
        }
    ]

DÉMO

Mise à jour: tri de l'info-bulle partagée

En réaction au commentaire Hanoncs , il est possible de trier l'ordre dans une info-bulle partagée comme dans la légende en utilisant un petit hack. Ce hack va comme suit:

  1. Utilisez la propriété

    yAxis: {
    reversedStacks: false 
},

  2. Inversez la propriété index de la série ajoutée. Dans l'exemple ci-dessus, la série 'base' a alors index:0 et 'sec' est attribué à index:1. Les éléments de l'info-bulle partagée seront triés en sens inverse.

DEMO 2

31
Jean-Paul

Vous pouvez utiliser le paramètre index qui permet de contrôler order http://api.highcharts.com/highcharts#series.index

0
Sebastian Bochan