extjs4.1从服务器端动态获取数据确定条数画出折线图

        接触程序员行业有一段时间了，现在才来开通博客，把我平时遇到的问题记录下来与大家分享。

        第一家公司用的extjs4.1的mvc模式，这个框架从来没有接触过但是我能感觉出来它确实很强大。最近碰到一个统计方面的需求，要求展示一段时间内不同访问点的频道访问量，访问点是不确定的，也就是说有几个访问点就会有几条折线。官网的例子大概是这样的：

         数据为：

<pre name="code" class="plain">var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
        { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
        { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
        { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
        { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
    ]
});

图的部分是这样的：

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data1', 'data2'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'data1',
            markerConfig: {
                type: 'cross',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        },
        {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            fill: true,
            xField: 'name',
            yField: 'data2',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }
    ]
});



根据对官网的例子的理解，那么我们所需要的是这样的数据(即服务器端返回的数据)：（访问点是：FF,WW,GG）
String jsonStr = [{'time':'2015-01-01','FF':12,'WW':0,'GG':10},
{'time':'2015-01-01','FF':15,'WW':10,'GG':20},
{'time':'2015-01-01','FF':10,'WW':9,'GG':18},
{'time':'2015-01-01','FF':13,'WW':30,'GG':17}]，
String[] resscode=[‘FF’，‘WW’，‘GG’]

同时需要数组  var arr1=[’time‘，‘FF’，‘WW’，‘GG’]，
同时需要这样的数组  var arr2=[‘FF’，‘WW’，‘GG’]
有了这两个数组就很方便了接下来就是我们的折线图生成了。
首先构建需要的数据集 
Ext.Ajax.request({
				url:' ',
				params:{},
				success:function(resp,opts){
					var respJson = Ext.JSON.decode(resp.responseText);
					if(respJson.success){
						
						var store = Ext.create('Ext.data.Store',{
							fields:arr1,
							data: eval("("+respJson.jsonStr+")")
						});
						var series = [];
						var colors = ['#912BD','#2248DD','#766F91','#2B91D5','#6F9183','#2BD52B','#BDE61A','#0D0F02','#C07D50','#FFA011'];
						for(var i = 0 ;i<arr2.length;i++){
							(function(i){
								series[i] = {
									   type: 'line',
							                    axis: 'left',
							                    xField: 'time',
							                    yField: arr2[i], 
							                    tips: {
							                        trackMouse: true,
							                        width: 60,
							                        renderer: function (storeItem, item) {
							                            this.setTitle(fielda[i]+":"+storeItem.get(arr2[i]));
							                        }
							                    },
							                    style: {
							                    	fill: colors[i],
							                        stroke: colors[i],
							                        'stroke-width': 1
							                    },
							                    markerConfig: {
							                        type: 'circle',
							                        size: 2,
							                        radius: 2,
							                        'stroke-width': 0,
							                        fill: colors[i],
							                        stroke: colors[i]
							                    }
							                };
								}
							})(i);
						}
							
						var chart2 = Ext.create('Ext.chart.Chart',{
							 xtype: 'chart',
			                 animate: true,
			                 store: store,
			                 insetPadding: 30,
			                 axes: [{
			                     type: 'Numeric',
			                     minimum: 0,
			                     position: 'left',
			                     fields: arr2,
			                     title: false,
			                     grid: true,
			                     label: {
			                         renderer: Ext.util.Format.numberRenderer('0,0'),
			                         font: '10px Arial'
			                     }
			                 }, {
			                     type: 'Category',
			                     position: 'bottom',
			                     fields: ['time'], //x轴
			                     title: false,
			                     label: {
			                         font: '11px Arial',
			                         rotate: {
			                             degrees: -30
			                         }
			                     }
			                 }], 
			                 legend: {
			                     position: 'top'
			                 },
			                 series:series
							
						});
				var panel2 = Ext.create('widget.panel', {
			                 height: 570,
			                 margins: '0 0 0 0',
			                 renderTo: Ext.getBody(),
			                 layout: 'fit',
			                 border: '0 0 0 0',
			                 hidden:true,
			                 items: [chart2]
			             });
				},
				failure:function(resp,opts){
					myMask.hide();
					var respJson = Ext.JSON.decode(resp.responseText);   
					Ext.Msg.alert('提示',respJson.message);
				}
			});



这里感谢这位博主：http://www.coding123.net/article/20130807/ext4-create-line-chart-dynamic-from-server-response.aspx