[英]How to change ExtJS line chart series order
I have a line chart with multiple series in 4.02. 我在4.02中有多个系列的折线图。 At different points the series lines cross, I need a specific line to remain as the top line ie biggest z-index (so that this line highlights and displays its tips when hovered over as opposed to the other ones). 系列线在不同的点交叉,我需要保留一条特定的线作为顶部线,即最大的z索引(这样,当该线悬停在上方时,该线会突出显示并显示其尖端,而其他方向则相反)。
I do not want to just reorder the sequence that the series are written in the javascript because I need the legend sequence to remain the same (they are all titled as dates and I want to keep them in date order). 我不想只是重新排序用javascript编写的序列的顺序,因为我需要图例序列保持相同(它们都以日期命名,并且我希望它们按日期顺序排列)。
I looked for some kind of Ext.chart.series.Line
config option to set the z-index but was not successful. 我寻找了某种Ext.chart.series.Line
配置选项来设置z-index,但是没有成功。
I've already extended the base theme to define custom stroke-widths for the different lines, so I started to look for some kind of theme option to set a series z-index but have not been successful on that either. 我已经扩展了基本主题以为不同的行定义自定义笔触宽度,因此我开始寻找某种主题选项来设置系列z-index,但是在这方面都没有成功。
Any ideas? 有任何想法吗?
EDIT: 编辑:
I've added the zindex config to my extended chart theme, this produces no errors but doesn't change anything in the chart at all (the first series listed with z-index 4 is on bottom, z-index 5 is second from bottom, z-index 3 is 3rd from bottom, etc.), seems it's over-ruled somewhere: 我已将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));
}
});
Ok, I sorted it out, zIndex not zindex in the custom theme: 好的,我整理了一下,自定义主题中的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));
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.