Ext 차트의 동적 생성

회사의 계획에 따라 사용자 정의 도표를 포함하는 사용자 정의 조회 구성 요소를 실현하려면 기본적인 요구는 다음과 같다.
1. 차트는 사용자 정의할 수 있으며 정의가 완료되면 데이터베이스에 저장됩니다.
2. 데이터베이스에 저장된 도표 정의에 따라 스타일, 축, 시퀀스, 조회 조건, 조회 단추 등을 포함하여 도표를 정확하게 보여준다.
3. 데이터 원본은 설정을 통해 얻은 다음에 데이터 원본에 따라 데이터를 조회한다(같은 데이터베이스에 없을 수도 있다).
 
여기는 도표 정의, 데이터 출처와 도표를 보여줄 때의 조회 조건과 조회 단추 등은 상관하지 않고 Ext로 사용자 정의 도표를 정확하게 보여주는 부분에만 관심을 갖는다.
ext 문서를 보기, 탐색, 시도를 통해 ext의 도표는 주로 네 가지 문제를 포함하고 있음을 알 수 있다. 도표 자체(주로 스타일), 축, 서열과store, 그리고 축, 서열과store의 설정이 일치해야 한다. (주로 필드가 일치해야 한다.)
 
이제 차트를 만들 수 있습니다. 차트를 만들기 전에 축, 시퀀스, store (순서가 없음) 를 만들어야 합니다.
축을 생성하려면 다음과 같이 하십시오.

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

시퀀스를 만들려면 다음과 같이 하십시오.

	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 만들기:

	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에 따라 도표를 조립하면 된다.

	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의 원본 코드를 깊이 파고들지 않았다.