<a href="http://m.kuaidi100.com" target="_blank">快递查询</a>
欢迎转载,转载请注明出处,谢谢
本插件是在Ext 3.x上开发完成的
最近项目上需要做一些简单的图表,考虑到图表并不复杂加上前台页面上大多用Ext,所以我决定这些简单的图表就用Ext自带的chart来完成。
piechart,我就不细说了,网上有很多例子,在这里重点说一下折线图linechart
Ext自带的折线图跟GridPanel类似,需要在页面上写义好相关列(GridPanel定义columnModel,linechart定义series),但是项目中的一个折线图的折线条数是不固定的,要根据业务条件从数据库查,查出多少条就显示多少条,很显然这个要求Ext做不到,于是决定修改下源码,开发一个小插件来满足这个要求,代码如下:
/** * * @author LuoYu * @date 2012-12-04 * 基于EXT-3.3.0开发的可以添加动态折线数的EXT.chart.DynamicLineChart插件 * 初使化方法可以通过 new Ext.chart.DynamicLineChart(), * 也可以通过xtype的形式,xtype:dynamiclinechart * */ Ext.chart.DynamicLineChart = Ext.extend(Ext.chart.LineChart,{ initComponent : function() { var store = new Ext.data.Store({ url : this.loadUrl, reader : new Ext.data.JsonReader() }); var config = { store : store, xField: this.xField, series : new Array(), extraStyle:{ legend:{ display: 'bottom', padding: 5, font:{ family: 'Tahoma', size: 13 } } } }; Ext.apply(this, config); Ext.apply(this.initialConfig, config); Ext.chart.DynamicLineChart.superclass.initComponent.apply(this, arguments); }, onRender : function() { Ext.chart.DynamicLineChart.superclass.onRender.apply(this,arguments); this.store.on('load', function() { if (typeof (this.store.reader.jsonData.series) === 'object') { var series = []; Ext.each(this.store.reader.jsonData.series, function(serie) { series.push(serie); }); this.setSeries(series); } }, this); this.store.load(); } }); Ext.reg("dynamiclinechart", Ext.chart.DynamicLineChart);
创建好这个js之后,在页面上引入该js,调用方法如下:
{ xtype:'dynamiclinechart', loadUrl : '${ctx}/productQuality/ooxx.action', xField:'name' }
当然在这你也可以通过new Ext.chart.DynamicLineChart来创建...
这个插件需要在页面定义中定义好X轴列名,因为毕竟X轴只有一个,可以按照约定在页面上定义好.
好了,现在万事具备,只欠东风了,下面的后台需要输出的JSON格式:
{ 'metaData': { 'root':'records', //这个record和下面那个record保持一致,名字可以随便取 'fields':[ {'name':'name','type':'string'}, {'name':'views','type':'string'}, {'name':'visits','type':'string'} ] }, 'series': [ {'type': 'line',displayName: 'Good',yField: 'views'}, {'type': 'line',displayName: 'Good',yField: 'visits'} ], 'records': //对应上面的record [ {name:'Jul 07', visits: 245000, views: 300000}, {name:'Aug 07', visits: 240000, views: 350000}, {name:'Sep 07', visits: 355000, views: 400000}, {name:'Oct 07', visits: 375000, views: 420000}, {name:'Nov 07', visits: 490000, views: 450000}, {name:'Dec 07', visits: 495000, views: 580000}, {name:'Jan 08', visits: 520000, views: 600000}, {name:'Feb 08', visits: 620000, views: 750000} ] }
输出的格式一定要和上面的格式一致
唯一需要注意的是输出的JSON格式的X轴列名必须和你页面上定义的一样就OK了,其中的series就是你要显示的折线,series数组有多少就显示多少条.
-----------------------------------------------------华丽丽的割一下----------------------------------------------------
最近很多同学加我QQ问我相关的问题,很多问题都是很基础的,所以希望有问题的同学先仔细阅读博客里的文字,文字已经描述得很清楚,只要你按照要求来是不会出问题的。当然如果你实在解决不了,我很乐意协助.