Highcharts - Изменение индекса индекса легенды

При создании диаграммы со столбчатыми столбцами с использованием высоких диаграмм моя серия добавляется по умолчанию сверху вниз - первая добавленная серия помещается сверху. Я бы хотел изменить это поведение, чтобы последняя добавленная серия была сверху. Я попытался изменить параметры индекса и zIndex, но затем элементы в легенде также были переупорядочены. Вот простой пример: 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
            }
        ]
    });   
});

Можно ли изменить порядок стека, но сохранить порядок легенд? Я бы просто хотел, чтобы легенда была заказана в алфавитном порядке, но элементы в диаграмме добавлены снизу вверх.

Ответы

Ответ 1

Да, это определенно возможно.

То, что вы ищете, это параметр с именем legendIndex.

Это позволит вам указать порядок элементов в легенде; следовательно, можно переключать сложенные столбцы и не переключать элементы легенды.

Например, вы можете сделать следующее:

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

DEMO

Обновление: сортировка общей подсказки

В ответ на комментарий Hanoncs можно отсортировать порядок в общей подсказке, как в легенде, с помощью небольшого хака. Этот взлом выглядит следующим образом:

  1. Используйте свойство

    yAxis: {
    reversedStacks: false 
},

  2. Переверните свойство index добавленной серии. В приведенном выше примере серия 'base' затем имеет index:0 и 'sec' дается index:1. Элементы в общей всплывающей подсказке будут отсортированы в обратном порядке.

ДЕМО 2

Ответ 3

Не уверен, что это правильный путь. Но с помощью CSS вы также можете изменить порядок своих легенд.

В моем случае у меня есть angular составляющие легенды & следующий HTML-код, который будет генерироваться динамически.

<div class="legend">
    <div>legend 1</div>
    <div>legend 2</div>
    <div>legend 3</div>
</div>