Highcharts - 更改图例索引顺序

syn*_*ror 16 highcharts

使用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
            }
        ]
    });   
});
Run Code Online (Sandbox Code Playgroud)

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

Jea*_*aul 34

是的,这绝对是可能的.

你要找的是所谓的参数legendIndex.

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

例如,您可以执行以下操作:

series: [
        {
            name: 'base',
            data: [10, 20, 30],
            index:1,
            legendIndex:0
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:0,
            legendIndex:1
        }
    ]
Run Code Online (Sandbox Code Playgroud)

DEMO


更新:排序共享工具提示

作为对Hanoncs评论的回应,可以使用一点hack 在共享工具提示中对顺序进行排序,就像在图例中一样.这个hack如下:

  1. 使用该属性

    yAxis: {
        reversedStacks: false 
    },
    
    Run Code Online (Sandbox Code Playgroud)
  2. 反转index添加系列的属性.在上面的例子中,串联'base'然后已index:0和'sec'给出index:1.共享工具提示中的项目将反向排序.

演示2