最近项目上需要做一些简单的图表,考虑到图表并不复杂加上前台页面上大多用Ext,所以我决定这些简单的图表就用Ext自带的chart来完成。
piechart,我就不细说了,网上有很多例子,在这里重点说一下折线图linechart 17jquery.com
Ext自带的折线图跟GridPanel类似,需要在页面上写义好相关列(GridPanel定义columnModel,linechart定义series),但是项目中的一个折线图的折线条数是不固定的,要根据业务条件从数据库查,查出多少条就显示多少条,很显然这个要求Ext做不到,于是决定修改下源码,开发一个小插件来满足这个要求,代码如下: 内容来自17jquery
/**
*
* @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); 17jquery.com
创建好这个js之后,在页面上引入该js,调用方法如下:
{ xtype:'dynamiclinechart', loadUrl : '${ctx}/productQuality/ooxx.action', xField:'name' }
当然在这你也可以通过new Ext.chart.DynamicLineChart来创建...
这个插件需要在页面定义中定义好X轴列名,因为毕竟X轴只有一个,可以按照约定在页面上定义好.17jquery.com
好了,现在万事具备,只欠东风了,下面的后台需要输出的JSON格式:
{ 'metaData': { 'root':'records', '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': [ {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数组有多少就显示多少条.