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

来源：互联网发布：知乎运营编辑：程序博客网时间：2024/05/21 07:02

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

第一家公司用的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

0 0