Extjs 製做柱狀圖

時間 2019-11-20

標籤 extjs 製做柱狀简体版

原文原文鏈接

在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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。