Question

我需要绘制一个带有两个yAxis的图表，我还需要堆叠列。当我有一个单轴时，我可以很好地叠加第三列的值。问题是当我添加第二个yAxis（多轴）时，新的三个值叠加在旧的上。这导致单个堆叠列中的6个值。我不想要这个。我希望我可以根据新的yAxis设置不同的plotOptions来堆叠列。这是我试过的

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

任何人edit this fiddle可以帮助我做我想做的事吗？

由于

Answer 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

HighCharts如何在多轴图表中按yAxis使用不同的plotOptions

1 个答案: