HighCharts, как использовать разные plotOptions для каждой оси y в диаграмме с несколькими осями

Мне нужно нарисовать диаграмму с двумя осями Y, а также сложить столбцы. Когда у меня есть одна ось, я могу очень хорошо складывать три значения столбца. Проблема в том, что когда я добавляю вторую yAxis (несколько осей), новые три значения накладываются на старое. В результате получается 6 значений в одном столбце с накоплением. Я не хочу этого. Я хотел бы установить другой plotOptions для укладки столбцов в соответствии с новой осью y. Вот что я пробовал

   $(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Enveloppe and Effectif in Kinshasa'
        },
        subtitle: {
            text: 'Source: sygecpaf'
        },
        xAxis: [{
            categories: ['Ja', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}Fc',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Enveloppe',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Effectifsl',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Total',
            color: '#2415cf',
            type: 'column',
            yAxis: 1,
            data: [499, 715, 1064, 499, 715, 1292, 1440, 1760, 1356, 1485, 2164],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Payés',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Non payés',
            color: '#c572A7',
            type: 'column',
            yAxis: 1,
            data:[1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
            tooltip: {
                valueSuffix: ''
            }

        }, {
            name: 'Total',
            color: '#89A54E',
            type: 'column',
            data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
            tooltip: {
                valueSuffix: ' Fc'
            }
        }, {
            name: 'Payés',
            color: '#89A5fE',
            type: 'column',
            data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
            name: 'Non Payés',
            color: '#72c5A7',
            type: 'column',
            data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });
});

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

Спасибо


person Bellash    schedule 29.03.2014    source источник


Ответы (1)


Я наконец решил проблему. На самом деле мне пришлось определять свойство стека внутри каждой серии.

    ....,{
            name: 'leg1',
            stack: 'effstack',
            yAxis: 1,
            data:[...],

        },{
            name: 'leg2',
            stack: 'effstack',
            yAxis: 1,
            data:[...],

        },{
            name: 'leg3',
            stack: 'otherstack',
            yAxis: 0,
            data:[...],

        },{
            name: 'leg4',
            stack: 'otherstack',
            yAxis: 0,
            data:[...],

        },...

Вот новый jsfiddle

person Bellash    schedule 29.03.2014