Extjs 制作柱状图
在JSP页面制作柱状图，可以根据数据的变化动态实时的变化
主要是使用EXTJS自带的插件达到效果
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 =[]; }
使每次显示最新的值。
后期对代码做了进一步的优化，由于Ext.chart.Chart本身就是EXTJS的一个组件，可以直接显示，不用放在面板里。对数据的存放做了处理
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) }); } } } } });
欢迎大家阅览，多多评论其中的不足！！
为工程师之路添砖加瓦！！
