Ext 画图

1.饼图

PieChartPanel = Ext.extend(Ext.Panel,{
	layout:'fit',
	
	border: false,
	
	initComponent: function() {
		this.constructor.superclass.initComponent.call(this);
		this.initDate();
	},
	initDate: function() {
		var initDateMethod = this.dao[this.initDateMethodName];
		initDateMethod.call(this,this.param, function(data) {
			var store = new Ext.data.JsonStore({
		        fields:this.fields,
		        data: data
		    });
			var chartConfig = {
					ref: 'chart',
					xtype: 'piechart',
					url:'../../resources/swf/charts.swf',
		            categoryField: this.fields[0],
		            dataField: this.fields[1],
			        store:  store,
			        extraStyle: {
		                legend:{
		                    display: 'bottom',
		                    padding: 5,
		                    font:{
		                        family: 'Tahoma',
		                        size: 13
		                    }
		                }
		            }
			};
			var chart = new Ext.chart.PieChart(chartConfig);
			this.add(chart);
			this.doLayout();
			//添加饼图事件
			this.addChartListeners();
			//组件初始化完
			this.afterWidgetsInitialization();
		}.createDelegate(this));
	},
	addChartListeners: function() {
		if (Ext.isArray(this.chartListeners)) {
			var listeners = this.chartListeners, i = 0, len = listeners.length, listener;
			for (; i < len; i++) {
				listener = listeners[i];
				if (listener.eventName) {
					this.chart.on(listener.eventName, listener.fn || Ext.emptyFn, listener.scope || this);
				}
			}
		}
	},
	afterWidgetsInitialization: function() {
		
	}
});

2.圆柱图

ColumnChartPanel = Ext.extend(Ext.Panel,{
	layout:'fit',
	
	border: false,
	
	initComponent: function() {
		this.constructor.superclass.initComponent.call(this);
		this.initDate();
	},
	initDate: function() {
		var initDateMethod = this.dao[this.initDateMethodName];
		initDateMethod.call(this,this.param, function(data) {
			var series2 = this.series;
			if(data != null){
				var header_array = data.header;
				for(var i=0;i<header_array.length;i++) { // 动态加载圆柱
					series2[series2.length] = {
												  type:'column',
							        			  yField:header_array[i].value,
							        			  displayName: header_array[i].name
						            		   };
					
				}
			}
			var fields = [];
			fields.push(this.xfield);
			for(var i=0; i<this.series.length; i++) {
				fields.push(this.series[i].yField);
			}
			var store = new Ext.data.JsonStore({
		        fields:fields,
		        data: data.data
		    });
			var chartConfig = {
					ref: 'chart',
					url:'../../resources/swf/charts.swf',
					xtype:'stackedcolumnchart',
					xField: this.xfield,
					series: series2,
					xAxis:  this.xaxis,
			        yAxis:  this.yaxis,
			        extraStyle : {
						legend : {// 图例
							display : 'top',
							padding : 0,
							font : {
								size : 10
							}
						}
			        },
			        store:  store
			};
			
			var chart = new Ext.chart.StackedColumnChart(chartConfig);
			this.add(chart);
			this.doLayout();
			//添加趋势图和柱状图事件
			this.addChartListeners();
		}.createDelegate(this));
	},
	addChartListeners: function() {
		if (Ext.isArray(this.chartListeners)) {
			var listeners = this.chartListeners, i = 0, len = listeners.length, listener;
			for (; i < len; i++) {
				listener = listeners[i];
				if (listener.eventName) {
					this.chart.on(listener.eventName, listener.fn || Ext.emptyFn, listener.scope || this);
				}
			}
		}
	}
});