Добавьте новую серию в верхнюю часть таблицы с накопительными столбцами

Question

Я пытаюсь контролировать порядок, в котором новые (после первого рендера) серии добавляются в столбчатую диаграмму с накоплением в Highcharts. Прямо сейчас, если вы просто используете addSeries, вновь добавленная серия добавляется в конец стека. Вот упрощенная версия того, что я делаю

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]
    }, {
        name: 'sec',
        data: [30, 20, 10]
    }]
});

var i = 0;
$('#add').on('click', function (e) {
    chart.addSeries({
        data: [32, 43, 42],
        name: ++i,
        index: 0 //??????
    });
});

Вот скрипка этого: http://jsfiddle.net/6bCBf/

Кто-нибудь может придумать способ повернуть вспять / контролировать, где Highcharts вставляет новую серию?

Я пытался установить индекс новой серии на 0, но это ничего не делает. Установка его в -1 добавляет новую серию в конец массива, но тогда эта "укладка" не работает должным образом

Answer 1

Вы можете установить index и zIndex, чтобы поддерживать порядок между слоями, а затем добавить серию с соответствующими параметрами.

Пример: http://jsfiddle.net/6bCBf/5/

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:2,
            zIndex:10
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:1,
            zIndex:9
        }
    ]
},function(chart){



    $('#add').on('click', function (e) {

        chart.addSeries({
            data: [32, 43, 42],
            index: 0,
            zIndex:1
        });
    });


});

Answer 2

Highcharts также поддерживаетyAxis.reversedStacksсвойство, которое, если установлено false, изменит порядок точек данных стека. В JSFiddle OP первая серия, «база», появилась в верхней части диаграммы, а вторая серия, «сек», — под ней. Параметр reversedStacks: falseтак как в этом обновленном JSFiddle этот порядок меняется на противоположный, и новая серия появляется наверху стека, а не внизу.