HighchartsReact：不修改Series顺序，调整图例使data2优先显示的方法

我希望控制HighchartsReact的图例显示顺序，让data2从左到右第一个显示，之后再显示data1，但不改变现有series对象的顺序，请问是否有实现方法？

当前图例显示效果：图例从左到右依次为data1、data2
期望的图例显示效果：图例从左到右依次为data2、data1

当前我的legend配置代码如下：

legend: {
    enabled: true,
    align: 'left'
},

无需修改series数组的原有顺序，有两种可靠的实现方式：

方法一：为series配置legendIndex属性 #

在定义每个series时，通过legendIndex指定图例的优先级——数值越小，图例在列表中越靠前：

series: [
    {
        name: 'data1',
        data: [/* 你的数据 */],
        legendIndex: 2
    },
    {
        name: 'data2',
        data: [/* 你的数据 */],
        legendIndex: 1
    }
]

方法二：通过legend.order自定义排序逻辑 #

在legend配置中添加order函数，自定义图例的排序规则，直接指定你想要的显示顺序：

legend: {
    enabled: true,
    align: 'left',
    order: function(a, b) {
        const targetOrder = ['data2', 'data1'];
        return targetOrder.indexOf(a.name) - targetOrder.indexOf(b.name);
    }
}

两种方法都能达到调整图例顺序且不改动series原有顺序的目的，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Tal Levi