Question

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

我不想只是重新排序系列在javascript中编写的序列，因为我需要传说序列保持不变（它们都标题为日期，我希望它们保持日期顺序）。

我找了一些Ext.chart.series.Line配置选项来设置z-index但是没有成功。

我已经扩展了基本主题，为不同的行定义了自定义笔触宽度，所以我开始寻找某种主题选项来设置一个系列z-index，但是还没有成功

有什么想法吗？

修改

我已将zindex配置添加到我的扩展图表主题中，这不会产生任何错误，但根本不会更改图表中的任何内容（z-index 4列出的第一个系列位于底部，z -index 5是从底部开始的第二个，z-index 3是从底部开始的第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));
    }
});

如何更改ExtJS折线图系列订单

1 个答案: