Extjs4 MVC Area面积图Numeric类型y轴不动态变化的方法

注意：使用的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了。