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); } } } } });