如何防止我的堆叠系列反向排列?

问题描述 投票:22回答:5

我尝试了一个example of stacked series on JSFiddle,但根据我的说法,系列在堆叠时会反转:

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

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

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        }]
    });
});

蓝色的第一行应首先绘制(1月:29.9),第二行应添加到此行(1月:29.9 + 144 = 173.9)。

有没有办法在堆叠时以正确的顺序获得系列?

javascript indexing highcharts series stacked
5个回答
28
投票

您可以通过索引参数更改顺序,该参数可以在系列中设置。

http://jsfiddle.net/KLttA/

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        index:1
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
        index:0
    }]

43
投票

由于这是谷歌的最佳结果,这可能为一些人节省时间:

yAxis有一个reversedStacks参数(从版本3.0.10开始),默认情况下是true。要自下而上构建堆栈,请将其设置为false。图例和共享工具提示项目顺序保持正确。

http://jsfiddle.net/r5upptLo/


1
投票

您可以使用系列的legendIndex参数:http://api.highcharts.com/highcharts#series.data.legendIndex


0
投票

另一种方法是将.reverse()添加到系列数组的末尾,参见http://jsfiddle.net/sq9u6q5n/的示例。


-2
投票

您正在寻找的是xAxis或yAxis中的reversed。我尝试了reversedStacks,但它没有用,在查看文档后,我找不到它,所以假设它已被reversed取代。

© www.soinside.com 2019 - 2024. All rights reserved.