Highcharts - 更改图例索引顺序 [英] Highcharts - Change legend index order

问题描述

使用高图创建叠加列的图表时，我的系列默认从上到下添加 - 第一个添加的系列放在最上面。我想改变这种行为，以便最后添加的系列处于最佳状态。我试图改变索引和zIndex选项，但传说中的项目也被重新排序。
下面是一个简单的例子： http://jsfiddle.net/6bCBf/7/ 。

  $（function（）{
 
 var chart = new Highcharts.Chart（{
 
图：{
类型：'列'，
 renderTo：'container'
}，
 
 xAxis：{
类别： ['Jan'，'Feb'，'Mar'] 
}，
 
 plotOptions：{
 series：{
 stacking：'normal'
 } 
}，
 
系列：[
 {
名称：'base'，
数据：[10,20,30]，
指数：25，
 zIndex：10 
}，
 {
名称：'sec'，
数据：[30,20,10]，
 index：1，
 zIndex：9 
} 
] 
}）; 
}）; 
  

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

是的，这绝对是绝对的可能。

您正在寻找的是名为 legendIndex 。

这将允许您指定图例中项目的顺序;因此可以切换堆积列而不切换图例项目。

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

 系列：[
 {
名称：'base'，
数据：[10,20,30]，
索引：1，
 legendIndex：0 
}，
 {
名称：'秒'，
数据：[30,20,10]，
索引：0，
 legendIndex：1 
} 
] 
  

< a href =http://jsfiddle.net/aezHL/ =noreferrer> DEMO

---

更新：排序共享工具提示

针对 Hanoncs 评论，可以在共享工具提示在传说中使用一点点黑客。这个破解如下：

1. 使用属性

   
   
   <$ p $ b
   
   $ reverse
   
   
   
   
   
   
   
   
   $ b $

2. 颠倒已添加系列的索引属性。在上面的例子中，系列'base'然后有 index：0 和'sec' 给出 index：1 。共享工具提示中的项目将被反向排序。

/ a0f9jdL7 /rel =noreferrer> DEMO 2



---




When creating a chart with stacked columns using highcharts my series are added by default from top to bottom - the first added series is placed on top. I'd like to alter this behaviour so that the last added series was on top. I tried to change index and zIndex options, but then items in legend got reordered as well. Here is a simple example: 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
            }
        ]
    });   
});

Is it possible to change stack order, but keep legend ordering? I'd just like to have legend ordered alphabetically, but items in chart added from bottom to top.

解决方案

Yes that's most definitely possible.

What you are looking for is the parameter called legendIndex.

This will allow you to specifiy the order of the items in the legend; hence being able to switch the stacked columns and not switch the legend items.

For example, you could do the following:

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

DEMO

---

Update: sorting shared tooltip

In reaction to Hanoncs comment, it is possible to sort the order in a shared tooltip as in the legend by using a little hack. This hack goes as follows:

1. Use the property

   yAxis: {
       reversedStacks: false 
   },
   

2. Reverse the index property of the added series. In the example above, series 'base' then has index:0 and 'sec' is given index:1. The items in the shared tooltip will be sorted reversely.

DEMO 2

---

这篇关于Highcharts - 更改图例索引顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！