如何更改 ExtJS 折线图系列顺序

Question

我在 4.02 中有一个包含多个系列的折线图。在系列线交叉的不同点，我需要一条特定的线作为顶线，即最大的 z-index（这样当悬停时，这条线会突出显示并显示其提示，而不是其他线）。

我不想只是重新排序该系列在 javascript 中编写的序列，因为我需要图例序列保持不变（它们都被命名为日期，我想保持它们的日期顺序）。

我寻找某种Ext.chart.series.Line 配置选项来设置z-index，但没有成功。

我已经扩展了基本主题以定义不同线条的自定义笔触宽度，因此我开始寻找某种主题选项来设置系列 z-index，但也没有成功。

有什么想法吗？

编辑：

我已将 zindex 配置添加到我的扩展图表主题中，这不会产生任何错误，但根本不会更改图表中的任何内容（列出的第一个系列 z-index 4 在底部，z-index 5 是倒数第二个，z-index 3 是倒数第三个，等等），似乎它在某处被否决了：

// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: ['rgb(0, 0, 0)', 
                     'rgb(0,0,255)', 
                     'rgb(255,0,0)', 
                     'rgb(0,128,0)', 
                     'rgb(128,0,128)'
            ],
            seriesThemes: [{
                'stroke-width': 3,
                zindex: 4
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 5
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 3
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 2
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 1
            }]                
        }, config));
    }
});

Answer 1

好的，我整理了一下，自定义主题中的zIndex不是zindex：

// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: ['rgb(0, 0, 0)', 
                     'rgb(0,0,255)', 
                     'rgb(255,0,0)', 
                     'rgb(0,128,0)', 
                     'rgb(128,0,128)'
            ],
            seriesThemes: [{
                'stroke-width': 3,
                zIndex: 4
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 5
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 3
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 2
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 1
            }]                
        }, config));
    }
});