如何防止我的堆叠系列倒序显示？

Question

我在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)。

当堆叠系列时，有没有一种方法可以按正确顺序获取它们？

- keskispas

Answer 1

鉴于这是谷歌中的最佳结果，也许这会为一些人节省时间:

yAxis拥有一个reversedStacks参数（自3.0.10版本以来），默认值为true。若要从下往上构建堆栈，请将其设置为false。这样可以保持图例和共享提示项目的正确顺序。

http://jsfiddle.net/r5upptLo/

- lionel

---

API文档：http://api.highcharts.com/highcharts/yAxis.reversedStacks我期望默认值为false。 - marcovtwout

Answer 2

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

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
    }]

- Sebastian Bochan

---

我会尝试并添加“legend: { reversed: true }”以使其顺序正确。谢谢！ - keskispas

Sebastian，你知道如何在C#中设置系列索引值吗？ - cgalvao1993

老实说我不太熟悉C#，但它在JavaScript中是一个对象，因此您需要熟悉如何在C#中返回JSON并在JS中使用。 - Sebastian Bochan

虽然@lionel的答案更适合仅获取正确顺序的堆栈，但在其他情况下（例如修复条形图中非堆叠多个系列的顺序）仍然非常有用。 - hon2a

当使用chart.addSeries()时，这种方法不起作用。zIndex可以解决这个问题。 - Hao Chang

如果您正在使用堆栈，这可能会更加令人困惑，因为您将在堆栈内部进行子排序。我认为图例将按照堆栈的正确顺序排列，但是堆栈将不会按相反的顺序排列。除了让第二个堆栈的图例位于第一个堆栈的图例前面之外，我还没有找到解决此问题的方法。它们将绘制如下：{stack1: [a,b,c], stack2: [d]}，但图例将如下所示：[d, a, b, c]。如果您希望在堆栈 [a,b,c] 之后保持 d 绘制，则实际存储将如下所示：[a=2, b=1, c=0, d=3]。 - CTS_AE

Answer 3

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

- mt81

---

感谢您发布这些额外的细节 - legendIndex 实际上是我需要的（而不是 index，因为它由顺序设置）。 - Kong

根据文档，legendIndex 只适用于饼图，而 OP 给出的示例是线图。 - Charlie Martin

好吧，算了。我刚试了一下，它适用于所有图表类型。文档可能需要更新。 - Charlie Martin

Answer 4

另一种方法是在系列数组末尾添加.reverse()，请参阅http://jsfiddle.net/sq9u6q5n/上的示例。

- Feng Jiang

Answer 5

你要找的是x轴或y轴上的reversed。我尝试了reversedStacks，但它没有起作用，查看文档后，我发现它已经被reversed替代了。

- Matt Sich

---

“reversed” 做的是完全不同的事情。它反转了整个轴，例如，如果以前从左侧的“0”到右侧的“100”，现在“0”在右侧，条形（如果是条形图）从右侧开始。 - hon2a

这个答案与 Lionel 几个月前的基本相同（除了一个拥有正确属性值的答案）。 - TylerH