在JSP頁面製做柱狀圖,能夠根據數據的變化動態實時的變化ajax
主要是使用EXTJS自帶的插件達到效果ide
Ext.require('Ext.chart.*');
Ext.require([ 'Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox' ]);
而後編寫顯示的位置(模板)函數
var chartComMonthBudgetPanel = Ext.create('Ext.Panel', { id : 'chartComMonthBudgetPanel', // store : matDeptMonthBudgetStore, title : '預算分解狀況', frame : true });
在須要的地方展現出來,我將代碼打包寫在函數裏,我本身在業務中調用查詢工具
function _selectMatDeptMonthBudget() { var records = Ext.getCmp('comMatBudgetCatPanel').getSelectionModel().getSelection(); if (Ext.getCmp('YEAR_').getValue() == null) { Ext.MessageBox.show({ title : '提示', msg : '請輸入年份', buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.WARNING }); return false; } if (records.length == 0) { Ext.MessageBox.show({ title : '提示', msg : '請選擇物料預算分類', buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.WARNING }); return false; } if (Ext.getCmp('DEPT_CODE_').getValue() == null) { Ext.MessageBox.show({ title : '提示', msg : '請選擇做業區', buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.WARNING }); return false; } Ext.Ajax.request({ url : 'loadMat.do', type : 'ajax', method : 'POST', params : { 'YEAR_' : Ext.getCmp('YEAR_').getValue(), 'MAT_BUDGET_CAT_ID_' : records[0].get('MAT_BUDGET_CAT_ID_'), 'DEPT_CODE_' : Ext.getCmp('DEPT_CODE_').getValue() }, callback : function(options, success, response) { if (success) { var data = Ext.decode(response.responseText); if (data.success) { matDeptYearBudget = data.matDeptYearBudget; if (matDeptYearBudget != null) { Ext.getCmp('DEPT_YEAR_BUDGET_').setValue(matDeptYearBudget.BUDGET_); } else { Ext.getCmp('DEPT_YEAR_BUDGET_').setValue(0); } } else { Ext.getCmp('DEPT_YEAR_BUDGET_').setValue(0); } } } }); Ext.Ajax.request({ url : 'select.do', type : 'ajax', method : 'POST', params : { 'YEAR_' : Ext.getCmp('YEAR_').getValue(), 'MAT_BUDGET_CAT_ID_' : records[0].get('MAT_BUDGET_CAT_ID_'), 'DEPT_CODE_' : Ext.getCmp('DEPT_CODE_').getValue() }, callback : function(options, success, response) { if (success) { var data = Ext.decode(response.responseText); if(chartComMonthBudget != null){ Ext.getCmp('chartComMonthBudgetPanel').removeAll(true); ComMonthBudgetData =[]; } if (data.success) { matDeptMonthBudgetList = data.matDeptMonthBudgetList; for(var i=1;i<=12;i++){ var a=0; for(var j = 0; j < matDeptMonthBudgetList.length; j++){ if(matDeptMonthBudgetList[j].MONTH_==i){ ComMonthBudgetData.push({MONTH_ : matDeptMonthBudgetList[j].MONTH_ + '月',MONTH_BUDGET_ : matDeptMonthBudgetList[j].BUDGET_}); a=a+1; } } if(a==0){ ComMonthBudgetData.push({MONTH_: i +'月',MONTH_BUDGET_ : 0}); } } } Ext.define('WeatherPoint', { extend : 'Ext.data.Model', fields : ['MONTH_BUDGET_','MONTH_'] }); var ComMonthBudgetStore = Ext.create('Ext.data.Store', { model : 'WeatherPoint', data : ComMonthBudgetData }); //主要是此處的代碼 chartComMonthBudget = Ext.create('Ext.chart.Chart',{ id : chartComMonthBudget, height:350, width:600, style: 'background:#fff', animate: true, shadow: true, store : ComMonthBudgetStore, axes: [{ type: 'Numeric', position: 'left', fields: ['MONTH_BUDGET_'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['MONTH_'], title: '預算分解狀況', minimum: 1 }], series: [{ type: 'column', axis: 'left', highlight: true, tips: { trackMouse: true, width: 140, height: 28, renderer : function(storeItem, item) { this.setTitle(item.value[0] + ': ' + Ext.util.Format.usMoney(item.value[1])); }}, label: { display: 'insideEnd', // 'text-anchor': 'middle',//這句代碼沒有,在不少參考地方有,但查資料後不正確,沒有。 field: 'MONTH_BUDGET_', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, xField: 'MONTH_', yField: 'MONTH_BUDGET_' }] }); Ext.getCmp('chartComMonthBudgetPanel').add(chartComMonthBudget); } } }); }
我須要處理查詢時,在點擊查詢後,顯示最新的數據圖,因而使用了代碼優化
if(chartComMonthBudget != null){ Ext.getCmp('chartComMonthBudgetPanel').removeAll(true); ComMonthBudgetData =[]; }
使每次顯示最新的值。ui
後期對代碼作了進一步的優化,因爲Ext.chart.Chart自己就是EXTJS的一個組件,能夠直接顯示,不用放在面板裏。對數據的存放作了處理this
var matComMonthBudgetStore = Ext.create('Ext.data.Store', { storeId : 'matComMonthBudgetStore', autoLoad : false, pageSize : -1, fields : [ 'MONTH_', 'MONTH_BUDGET_' ] });
var matComMonthBudgetChart = Ext.create('Ext.chart.Chart', { id : 'matComMonthBudgetChart', store : matComMonthBudgetStore, title : '預算分解狀況', frame : true, animate : true, shadow : true, axes : [ { type : 'Numeric',//Numeric軸來展現區域序列數據 position : 'left',//numeric軸放在圖表左側 fields : [ 'MONTH_BUDGET_' ], label : { renderer : Ext.util.Format.numberRenderer('0,0') }, grid : true,//category和numeric軸都有grid集合,水平線和垂直線會覆蓋圖表的背景 minimum : 0 }, { type : 'Category',//Category軸來顯示數據節點的名字 position : 'bottom',//category軸放在圖表下部 fields : [ 'MONTH_' ], title : '預算分解狀況', minimum : 1 } ], series : [ { type : 'column',//顯示圖形類型- line:則線圖;column:柱形圖;radar:雷達圖 axis : 'left', highlight : true,//若是設置爲真,當鼠標移動到上面時,高亮。 tips : {//爲可視化標記添加工具欄 trackMouse : true, width : 140, height : 28, renderer : function(storeItem, item) { this.setTitle(item.value[0] + ': ' + Ext.util.Format.usMoney(item.value[1])); } }, label : { display : 'insideEnd',//指定餅圖標籤的位置。包括"rotate", "middle", "insideStart", "insideEnd", "outside", "over", "under", 或者 "none"能夠用來渲染標籤。 field : 'MONTH_BUDGET_',//標籤要展現的字段的名稱。 renderer : Ext.util.Format.numberRenderer('0'), orientation : 'vertical',//"horizontal" 或者 "vertical" color : '#333' }, xField : 'MONTH_', yField : 'MONTH_BUDGET_' } ] });
Ext.Ajax.request({ url : 'select.do', type : 'ajax', method : 'POST', params : { 'YEAR_' : Ext.getCmp('YEAR_').getValue(), 'MAT_BUDGET_CAT_ID_' : records[0].get('MAT_BUDGET_CAT_ID_'), 'DEPT_CODE_' : Ext.getCmp('DEPT_CODE_').getValue() }, callback : function(options, success, response) { if (success) { var data = Ext.decode(response.responseText); if (data.success) { var matDeptMonthBudgetList = data.matDeptMonthBudgetList; var matComMonthBudgetStore = Ext.data.StoreManager.lookup('matComMonthBudgetStore'); matComMonthBudgetStore.removeAll(); for (var i = 0; i < 12; i++) { matComMonthBudgetStore.add({ MONTH_ : (i + 1) + '月', MONTH_BUDGET_ : (matDeptMonthBudgetList[i].BUDGET_ != null ? matDeptMonthBudgetList[i].BUDGET_ : 0) }); } } } } });
歡迎你們閱覽,多多評論其中的不足!!url
爲工程師之路添磚加瓦!!spa