Ext圖表的動態生成

根據公司的規劃,要實現一個自定義的查詢組件,其中包括瞭自定義圖表,基本要求是:

 

1、  圖表可以自定義,定義完成後保存到數據庫中

 

2、  根據保存到數據庫的圖表定義正確的展現出圖表,包括樣式、軸、序列、查詢條件、查詢按鈕等。

 

3、  數據源通過配置獲取,再根據數據源,查詢出數據(可能不在同一個數據庫中)。

 

 

 

這裡不關心圖表定義、數據來源和圖表展現時的查詢條件與查詢按鈕等,隻關註如何用Ext正確展現自定義圖表的部分。

 

經過查看ext文檔、探索、嘗試,知道Ext的圖表主要包括四個問題:圖表本身(主要是樣式)、軸、序列和store,而且軸、序列和store的設置要匹配(主要是字段要匹配)。

 

 

 

現在可以開始創建圖表瞭,創建圖表之前要先創建出來軸、序列和store(沒有順序):

 

創建軸:

 

[javascript]  

createAxes:function(axisRecords){  

    var axes = [];  

    var axis;  

    for(var idx = 0; idx<axisRecords.length;idx++)  

    {  

        var gridStr = axisRecords[idx].get('grid');  

        var grid  = gridStr==""?false:Ext.JSON.decode(gridStr);  

        var labelStr = axisRecords[idx].get('label');  

        var label = labelStr==''?"":Ext.JSON.decode(labelStr);  

        var axisField = axisRecords[idx].get('fields');  

        axis = {  

            type: axisRecords[idx].get('axisType'),  

            position: axisRecords[idx].get('position'),  

            fields: axisField,  

            title: axisRecords[idx].get('title'),  

            dashSize:axisRecords[idx].get('dashSize'),  

            label : label,  

            grid : grid  

        };  

        axes.push(axis);  

    }  

    return axes;  

}  

創建序列:

 

[javascript] 

createSeries:function(seriesRecords){  

    var series = [];  

    var ser, labelStr, label, tipStr, tips, sourceName, xfield;  

    var fField ;  

    for(var idx=0;idx<seriesRecords.length;idx++){  

        fField = seriesRecords[idx].get('yField');  

        labelStr = seriesRecords[idx].get('label');  

        label = labelStr==''?"":Ext.JSON.decode(labelStr);  

        tipStr = seriesRecords[idx].get('tips');  

        tips = tipStr==''?'':Ext.JSON.decode(tipStr);  

        sourceName = seriesRecords[idx].get('sourceName');  

        xfield = seriesRecords[idx].get('xField');  

        xfield = xfield==null ? '' : xfield.toUpperCase();  

        ser = {              

            type: seriesRecords[idx].get('seriesType'),  

            axis: seriesRecords[idx].get('axis'),  

            highlight: true,  

            title : sourceName,  

            tips : tips,  

            showMarkers:true,  

            markerConfig:{  

                color: '#F00'  

            },  

            fill:seriesRecords[idx].get('fill'),  

            showInLegend : seriesRecords[idx].get('showLegend'),  

            stacked: seriesRecords[idx].get('stacked'),  

            xField: xfield,  

            yField: fField,  

            angleField: fField  

        };  

        if(label)  

            ser.label = label;  

        series.push(ser);  

    }  

    return series;  

}  

由代碼可以看出,每個軸或序列都是一個json格式的對象,全部軸或序列就一個數組。

 

創建store:

 

[javascript]  

createChartStore:function(){  

    var seriesRecords = Ext.getStore('ChartSeries').getRange();  

    var axisRecords = Ext.getStore('ChartAxes').getRange();  

    var fieldArr = [];  

    var idx, fields;  

    // 根據軸和序列得到要store應該包括哪些內容  

    for(idx = 0;idx<axisRecords.length;idx++){  

        fields = axisRecords[idx].get('fields');  

        if(fields != null)  

            fieldArr = Ext.Array.merge( fieldArr, fields.toUpperCase().split(','));  

    }  

    for(idx = 0;idx<seriesRecords.length;idx++){  

        fields = seriesRecords[idx].get('xField');  

        if(fields != null)  

            fieldArr = Ext.Array.merge( fieldArr,fields.toUpperCase().split(','));  

        fields = seriesRecords[idx].get('yField');  

        if(fields != null)  

            fieldArr = Ext.Array.merge( fieldArr,fields.toUpperCase().split(','));  

    }  

      

// 創建store  

    var store = Ext.create('Ext.data.Store', {  

        //pageSize :pageSize,  

        fields:fieldArr,  

        proxy: {  

            type : 'ajax',  

            url : '/hummer/application/controller/run/FindChartData.action',  

            reader  : {  

                type : 'json',  

                root : 'rows',  

                totalProperty : 'totalCount'  

            }  

        },  

        autoLoad : false  

        });  

        var pageNum = this.getOptionValue('每頁數據條數');  

        //  加載前,獲取頁面參數值,配置的查詢參數   

    store.on('beforeload', function (store, options) {  

        var conditionValues =  Ext.getCmp('conditionForm').getForm().getValues();  

        var constantValue = [currentUser,currentUnit,currentYearMonth, pageNum];  

        var params = {queryId:queryId,paramsValue:conditionValues,constantValue:constantValue};  

        Ext.apply(store.proxy.extraParams, params);  

    });  

  

    return store;  

}  

剩下的問題就比較簡單瞭,根據軸、序列和store把圖表組裝一下就可以瞭:

 

[javascript] 

createChartPanel:function(btns){  

    var axisModels = Ext.getStore('ChartAxes').getRange();  

       var axes = this.createAxes(axisModels);  

       var mySeries = this.createSeries(Ext.getStore('ChartSeries').getRange());  

       var chartStyle = Ext.getStore("ChartStyle").getRange();  

         

       var pieXfield = '';  

       if(mySeries.length>=1 && mySeries[0]['type']=='pie'){  

        pieXfield = mySeries[0]['xField'];  

       }  

         

       var store = this.createChartStore(mySeries);  

       var seriesLegend = false;  

         

       var myLegend = chartStyle[0].get("legend") ;  

       for(var idx in mySeries){  

        seriesLegend = seriesLegend || (mySeries[idx]['showInLegend'] );  

    }  

    // 當沒有顯示位置或所有的序列都不顯示圖示時,不顯示圖示  

       if(myLegend == null || myLegend == 'false' || myLegend == false||myLegend=='{"position":""}' || (seriesLegend == false)){  

        myLegend = false;  

       }  

       else{  

        myLegend = (myLegend == null ||myLegend == 'null' || myLegend == '') ? {position: 'bottom'} : Ext.JSON.decode(myLegend.toLowerCase());  

        if(!myLegend['position'])  

            myLegend['position'] = 'bottom';  

       }  

       //排序的處理  

       var sortFields = [], sortField;  

       for(idx in axisModels){  

        fieldName = axisModels[idx].get('fields');  

        if(axisModels[idx].get('sortType')){ // 排序  

            for(var i in fieldName){  

                sortField = {};  

                sortField['property'] = fieldName[i];  

                sortField['direction'] = axisModels[idx].get('sortType');  

                sortFields.push(sortField);  

            }  

        }  

    }  

       store.sort(sortFields);  // 排序  

         

    var background = chartStyle[0].get("background");  

    // 邊框的處理  

       var border = chartStyle[0].get("border");  

       var myStyle = chartStyle[0].get("style");  

       var myChart = Ext.create("Ext.chart.Chart",{  

           id: 'chartCmp',  

           width:Ext.Number.from(chartStyle[0].get("width")),  

           height:Ext.Number.from(chartStyle[0].get("height")),  

           xtype: 'chart',  

           //autoSize:true,  

           background : background,  

           border : border,   

           style: myStyle ,  

           //tpl:'圖表標題',  

           legend: myLegend,  

           theme:chartStyle[0].get("theme"),  

           animate: chartStyle[0].get("animate"),  

           resizable : chartStyle[0].get("resizable"),  

           //shadow: true,  

           store: store,  

           axes: axes,  

           series: mySeries//,  

       });  

    return myChart;  

}  

到現在為止,一個完整的動態圖表已經創建完成瞭,至於放到哪個位置顯示,就由你來定瞭。

 

 

 

通過這個自定義圖表的創建,可以看出,Ext的對象基本都是配置格式,和json格式很像,或者說就是json格式,但這個問題我沒有深入進去查看Ext的源碼。

 

發佈留言