接触程序员行业有一段时间了,现在才来开通博客,把我平时遇到的问题记录下来与大家分享。
第一家公司用的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