Extjs 根据 store返回数据 动态创建图表

根据store后台返回数据，动态创建图表类型，以及图表对象中包括的柱形，线性等等对象。暂时只支持柱形、和线性图表。

/**
 * Extjs4 动态创建图表
 * author:shangql
 * date:2012.12.12
 */

/**
 * 判断空如果为空返回true
 * 
 * @param obj
 * @returns {Boolean}
 */
function isEmpty(obj){
	if(typeof(obj) == 'undefined' || obj == ''){ 
		return true;
	}
}




/**
 * 创建刻度引用字段
 * @param num
 * @returns {Array}
 */
function newNumericFields(num){
	var fieldsArr = new Array();
	for ( var i = 1; i <= num; i++) {
		fieldsArr.push('data'+i);
	}
	return fieldsArr;
}

/**
 * 创建数据集引用字段
 * @param num
 * @returns {Array}
 */
function newStoreFields(num){
	var fieldsArr = new Array();
	fieldsArr.push("name");
	for ( var i = 1; i <= num; i++) {
		fieldsArr.push('name'+i);
		fieldsArr.push('data'+i);
	}
	return fieldsArr;
}


/**
 * 创建Y坐标轴
 * 
 * @param position
 *            坐标轴显示位置(left;right)
 * @returns 坐标轴对象
 */
function newNumeric(position){
	var Numeric = { 
		type: 'Numeric',
	    minimum: 0,
	    position: position,
	    fields: ['data1','data2','data3','data4','data5','data6','data7','data8','data9'],
	    minorTickSteps: 9,
	    majorTickSteps:9,
	    grid: {
	        odd: {
	            opacity: 1,
	            fill: '#ddd',
	            stroke: '#bbb',
	            'stroke-width': 0.5
	        }
	    },
	    grid:true,
	    label:{
			 renderer:function(v){
	    		return Ext.util.Format.round(v,2);
			},
	       font: '10px Arial'
			}
	    };
	    return Numeric;
}

/**
 * 创建X坐标轴
 * 
 * @param position
 *            坐标轴显示位置(top;bottom)
 * @param title
 *            坐标轴显示标题(可以是'')
 * @returns 坐标轴对象
 */
function newCategory(position,title){
	var Category = {
        type: 'Category',
	    position: position,
	    title: title,
	    fields: ['name'],
	    label: {
			font: '9px Chancery'
	        }
	    };
	    return Category;
}

/**
 * 创建柱
 * @param position 线的轴刻度显示位置(left;right)
 * @param tips 鼠标滑过图表显示的lable引用的字段
 * @param title 图表图例汉字标题
 * @param renderer 鼠标滑过图表显示的lable的单位
 * @returns 柱形对象
 */
function newColumn (position,tips,title,renderer){
	var column = {
		type: 'column',
        axis: position,
        highlight: {
			stroke:'green'
			},
        tips: {
          trackMouse: true,
          width: 140,
          height: 28,
          renderer: function(storeItem, item) {
            if(isEmpty(renderer)){
    			this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips));	
    		}else{
    			this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips) + renderer );
    		}
          }
        },
        style:{
			width:40
		},
        label: {
          display: 'insideEnd',
          'text-anchor': 'middle',
            field: '',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'vertical',
            color: '#333'
        },
        title:title,
        xField: 'name',
        yField: tips
		};
	return column;
}

/**
 * 创建线
 * @param position 线的轴刻度显示位置(left;right)
 * @param tips 鼠标滑过图表显示的lable引用的字段
 * @param title 图表图例汉字标题
 * @param renderer 鼠标滑过图表显示的lable的单位
 * @returns 线形对象
 */
function newLine (position,tips,title,renderer){
	var line = {
		type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        axis: position,
        smooth: true,
        fill: false,
        title:title,
        xField: 'name',
        yField: tips,
        markerConfig: {
            type: 'circle',
            size: 4,
            radius: 4,
            'stroke-width': 0
        },
        style: {
            'stroke-width': 3,
            fill: false,
            opacity: 0.2
        },
        tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
        		if(isEmpty(renderer)){
        			this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips));	
        		}else{
        			this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips) + renderer );
            		}
                  }
            }
		};
	return line;
}


/**
 * 画图表
 * @param store 数据集
 * @param category 样式种类
 * @param title 标题
 * @param seriesType 图表类型 column;line(暂时 只支持 柱形，线形)
 * @param renderer 渲染单位 可以为''
 * @returns
 */
function drawChart(store,category,title,seriesType,renderer){
	// 轴线数组
	var axes = new Array();
	// 图表类型数组
	var series = new Array();
	
	//============实例化轴============
	// y左坐标轴
	var leftNumeric = newNumeric('left');
	var bottomTitle = title + "分析指标";
	// x底部坐标轴
	var bottomCategory = newCategory('bottom',bottomTitle);
	
	// 添加到轴线数组,y左右坐标轴
	axes.push(leftNumeric);
	axes.push(bottomCategory);
	
	//判断图表类型
	if(seriesType == 'column'){
		// 实例化柱形图
		var column = newColumn('left','data1',title,renderer);
		series.push(column);
	}else if(seriesType == 'line'){
		// 实例化线形图
		var line = newLine('left','data1',title,renderer);
		series.push(line);
	}
	
	
	// 创建图表对象
	var chart = Ext.create('Ext.chart.Chart', {
        xtype: 'chart',
        width: $(window).width(),
        height: $(window).height() * 0.9,
        style: 'background:#fff',
        animate: true,
        shadow: false,
        store: store,
        theme: category,
        insetPadding: 50,
        legend: {
            position: 'right'
        },
        axes: axes,
        series: series
    });	
	
   // 返回图表对象
   return chart; 
}