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

欢迎大家阅览，多多评论其中的不足！！

为工程师之路添砖加瓦！！