DEMO

Question

使用highcharts创建带有堆叠列的图表时，我的系列默认情况下从上到下添加 - 第一个添加的系列放在顶部。我想改变这种行为，以便最后添加的系列在顶部。我试图改变索引和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
        }
    ]

DEMO

更新：排序共享工具提示

对Hanoncs评论做出反应，可以使用一点点黑客对图例中的顺序进行排序，就像在图例中一样。这个hack如下：

使用属性
```
yAxis: {
    reversedStacks: false 
},
```
撤消添加系列的index属性。在上面的示例中，系列'base'具有index:0，'sec'被赋予index:1。共享工具提示中的项目将反向排序。

shared tooltip

Answer 2

您可以使用index参数来控制订单http://api.highcharts.com/highcharts#series.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;
}

Highcharts - 更改图例索引顺序

3 个答案:

DEMO

更新：排序共享工具提示

shared tooltip