Highcharts - 更改图例索引顺序

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

是否有可能更改堆栈顺序，但保持图例排序？ 我只想按字母顺序对图例进行排序，但希望图表中的项目从底部添加。

- syntax_error

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 的评论，可以通过一个小技巧按照图例中的顺序对共享提示进行排序。这个技巧如下：

1. 使用属性

   yAxis: {
       reversedStacks: false 
   },
   

2. 将新增系列的index属性进行反转。在上面的示例中，系列'base'的index:0，而'sec'则被赋予了index:1。共享工具提示中的项目将以相反的顺序排序。

DEMO 2

---

- Jean-Paul

---

有没有办法对分组工具提示进行相同的排序？ 工具提示中的顺序不正确。 - M H

@Hanoncs：是的，这是可能的。请查看我的更新答案。 - Jean-Paul

有没有一种动态设置系列索引的方法？例如，根据某个条件在加载或重新绘制时更新系列索引。如果您能帮忙，那就太好了。 - arjary

刚发现这个 - 设置 legendIndex 非常有用！请参见例如 https://www.coronavisualizer.org/cv_vaccs.php#chart-pct-pop-vaccinated - Rob Banmeadows

@RobBanmeadows 很高兴听到它对你有帮助。 - Jean-Paul

这也帮助了我。我的设置中有一个系列和多个SerieData对象。我改变了LegendIndex，它是基于0的，并且可以修复，使得图例按照从上到下读取条形图添加的系列的自然顺序出现。 - Tore Aurstad

Answer 2

不确定是否正确的方法。 但是也可以使用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;
}

- Amar koulavkar

Answer 3

您可以使用索引参数来控制顺序 http://api.highcharts.com/highcharts#series.index

- Sebastian Bochan