EXT创建动态的折线图

<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问我相关的问题，很多问题都是很基础的，所以希望有问题的同学先仔细阅读博客里的文字，文字已经描述得很清楚，只要你按照要求来是不会出问题的。当然如果你实在解决不了，我很乐意协助.

评论

3 楼 luoyu-ds 2013-08-06  

JasonCeava 写道

代码下不了啊，能发一份给我吗？邮箱[e-mail]

亲，附件就是上面文章里的代码，你copy下就OK了

2 楼 JasonCeava 2013-08-05  

代码下不了啊，能发一份给我吗？邮箱[e-mail]

1 楼 ayaoxinchao 2012-12-05  

很NB啊，这个就是我想要的东西