highcharts - Highcharts - 更改图例索引顺序

Question

当使用 highcharts 创建带有堆叠列的图表时，我的系列默认从上到下添加 - 第一个添加的系列放在顶部。我想更改此行为，以便最后添加的系列位于顶部。我尝试更改 index 和 zIndex 选项，但图例中的项目也被重新排序。这是一个简单的例子：http: //jsfiddle.net/6bCBf/7/。

$(function () {

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

是否可以更改堆栈顺序，但保持图例顺序？我只想按字母顺序排列图例，但图表中的项目是从下到上添加的。

Answer 1

是的，这绝对是可能的。

您正在寻找的是名为legendIndex.

这将允许您指定图例中项目的顺序；因此能够切换堆叠列而不切换图例项。

例如，您可以执行以下操作：

series: [
        {
            name: 'base',
            data: [10, 20, 30],
            index:1,
            legendIndex:0
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:0,
            legendIndex:1
        }
    ]

演示

---

更新：排序共享工具提示

作为对Hanoncs评论的回应，可以通过使用一点技巧来对共享工具提示中的顺序进行排序，就像在图例中一样。这个hack如下：

1. 使用物业

   yAxis: {
       reversedStacks: false 
   },
   

2. 反转index添加系列的属性。在上面的例子中， series'base'有index:0并且'sec'is given index:1。共享工具提示中的项目将反向排序。

演示 2

---

Answer 2

您可以使用允许控制订单http://api.highcharts.com/highcharts#series.index的 index 参数

Answer 3

不确定它的正确方式。但是使用 CSS 也可以更改图例的顺序。

在我的情况下，我有角度组件图例和下面的 HTML，它将动态生成。

---

<div class="legend">
    <div>legend 1</div>
    <div>legend 2</div>
    <div>legend 3</div>
</div>

应用一些 CSS 后，它将反转图例的顺序。

:host ::ng-deep .saving-chat .legend {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
}