注意:使用的Extjs版本为4.2.1
好不容易搜到链接学习了:http://www.sencha.com/forum/showthread.php?264380-Chart-maximum-and-or-constrained-axis-on-stacked-area-graph&p=969889 下面我来分析一下并且应用带MVC应用程序中去。
本人使用Extjs Area面积图做了个统计表,并且能实时更新,使用的y轴是Numeric类型的,并且也设置了最大最小值,稍微上下axes配置代码:
axes: [{
type: "Numeric",
minimum: 0,
maximum: 50,
position: "left",
fields: ["1X","2X","3X","4X"],
title: "nX",
grid: {
odd: {
fill: "#dedede",
stroke: "#ddd",
"stroke-width": 0.5
}
}
}
OK,然后,当然使用的series自然就是area类型,也小上一下配置代码:
series: [{
type: "area",
axis: ["left","bottom"],
xField: "date",
yField: ["1X","2X","3X","4X"],
title: ["1X:one","2X:two","3X:three","4X:four"],
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 40,
renderer: function(storeItem, item) { //格式化呈现数据的方法
this.setTitle(storeItem.get(item.storeField));
}
},
style: {
opacity: 0.70
}
}]
OK,然后虽然在axes中配置了y轴的最大最小值(maximum,minimum),但是y轴依然像没有设置这两个配置似的,会根据数据集的数据动态变化,图:
会发现Numeric y轴的最大值是随着数据集合中最大值而变化的,但是我需要的效果是像Line线状图一样,所以办法就是改源码,或者扩展原有的Axes类,参考文章开始时候的博客,采用扩展类的方法。
先看原有的Numeric的源码,里面有个processView
// applying constraint
processView: function() {
var me = this,
chart = me.chart,
series = chart.series.items,
i, l;
for (i = 0, l = series.length; i < l; i++) {
if (series[i].stacked) {
// Do not constrain stacked charts (bar, column, or area).
delete me.minimum;
delete me.maximum;
me.constrain = false;
break;
}
}
if (me.constrain) {
me.doConstrain();
}
},
很明显可以看到里面对于stacked属性的判断,如果series具备stacked属性(Area以及具备stacked属性的柱状图),那么就取消掉最大最小值,使得其和默认配置一样由数据集数据动态决定。所以如果改代码或者做扩展,针对该方法进行修改就可以。使用继承扩展的方法如下面,copy参考的网站的代码:
Ext.define('Application.chart.axis.ConstrainedStackedNumeric', {
extend: 'Ext.chart.axis.Numeric',
alternateClassName: 'Ext.chart.ConstrainedStackedNumericAxis',
type: 'ConstrainedStackedNumeric',
alias: 'axis.constrainedstackednumeric',
constructor:function(cnfg){
this.callParent(arguments);//Calling the parent class constructor
this.initConfig(cnfg);//Initializing the component
},
processView: function() {
var me = this,
chart = me.chart,
series = chart.series.items,
i, l;
if (me.constrain) {
me.doConstrain();
}
}
});
OK就可以看新类继承了Numeric类,覆盖了原有processView方法,取消对于stacked的特殊处理,这样就能对stacked和非stacked的图表类型一视同仁。
接着使用它就和使用Numeric一样:
axes: [{
type: "ConstrainedStackedNumeric",
minimum: 0,
maximum: 50,
//......省略
使用这个扩展的类,需要requires一下这个扩展,配置如下:
requires: ["Application.chart.axis.ConstrainedStackedNumeric"],
然后就OK了。