`
luoyu-ds
  • 浏览: 138293 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

6
0
分享到:
评论
3 楼 luoyu-ds 2013-08-06  
JasonCeava 写道
代码下不了啊,能发一份给我吗?邮箱sj8921202@163.com

亲,附件就是上面文章里的代码,你copy下就OK了
2 楼 JasonCeava 2013-08-05  
代码下不了啊,能发一份给我吗?邮箱sj8921202@163.com
1 楼 ayaoxinchao 2012-12-05  
很NB啊,这个就是我想要的东西

相关推荐

    Ext 折线图

    在本案例中,我们关注的是"Ext 折线图",这涉及到一个JavaScript库——ExtJS,它是一个用于构建富客户端Web应用的框架。ExtJS提供了丰富的组件库,其中包括图表组件,可以方便地创建各种类型的图表,如折线图。 ...

    ExtJS制作折线图

    在给定的"ExtJS 制作折线图"主题中,我们将深入探讨如何使用ExtJS 的lineChart组件来创建动态、交互式的折线图。 首先,让我们了解什么是折线图。折线图是一种统计图表,通过连接一系列数据点来显示数值的变化趋势...

    ext4.0生成图形报表(柱形、折线、饼状)

    对于折线图,我们同样使用`Ext.chart.Chart`,但设置`series.type`为'line'。饼状图则需要设置`series.type`为'pie',并指定`donut`属性来控制饼图的内径大小。 在处理数据时,EXT4.0支持多种数据源,可以是JSON...

    ExtJs双折线图

    在这个特定的场景中,"ExtJs双折线图"是指使用Ext Js库来创建具有两组数据的折线图表。这种图表类型在数据分析和可视化中非常常见,可以用来比较两个变量随时间的变化趋势。 首先,创建一个双折线图需要对Ext Js的...

    EXtjs 统计图 饼图 直方图 和折线图

    在ExtJS中,使用`Ext.chart.Chart`和`Ext.chart.series.Line`系列配置可以创建折线图。你可以设置线的样式、点的标记,以及时间轴的格式化。以下是一个折线图的例子: ```javascript Ext.application({ name: 'App...

    Ext3.0 动态数据 Chart 初探

    Ext.Chart基于Sencha的YUI Charts库,提供了多种图表类型,如折线图、柱状图、饼图、散点图等。这些图表能够通过配置选项定制样式,包括颜色、线条宽度、数据标签等,以满足各种需求。 动态数据是指图表的数据源...

    EXT安装包4.2.1-1

    4. **强大的图表库**:EXT包含一个完整的图表组件,可以生成各种统计和数据分析图表,如折线图、柱状图、饼图等。 5. **触摸支持**:EXT4.2.1优化了对触摸设备的支持,使得在平板电脑和智能手机上也能流畅操作。 6. ...

    extjs4图表绘制之折线图实现方法分析

    在EXTJS4中,创建折线图是一种常用的数据可视化方式,可以帮助用户直观地理解数据变化趋势。本实例主要讲解如何利用EXTJS4的图表功能来实现动态数据的折线图展示,包括从后端获取数据并展示在图表上,以及查询每年...

    ext3.0中文API

    Charts是EXT3.0中的一个亮点,它支持各种类型的图表,如柱状图、折线图、饼图和散点图。通过API,开发者可以自定义图表的颜色、样式、数据源和交互行为,为数据可视化提供强大的工具。 除此之外,EXT3.0还包括了...

    Ext图形报表

    这些图表包括折线图、柱状图、饼图、散点图、面积图等,能够满足大多数数据可视化的需要。通过这些图表,用户可以直观地理解大量复杂数据。 在实现图形报表时,首先需要了解Ext.chart.Chart组件,它是ExtJS图表的...

    ext 3.3 中文 chm

    8. 图表(Charts):EXT 3.3的图表组件,如何创建各种统计图表,如柱状图、折线图等。 9. 性能优化(Performance Optimization):提供了一些提高EXT 3.3应用程序性能的技巧和策略。 10. API参考(API Reference):...

    EXT ,EXT.chm,ext中文

    4. **高级图表**:EXT提供了多种图表类型,如折线图、柱状图、饼图等,可用于数据可视化。 5. **触摸支持**:EXT Touch是EXT的移动版本,专门用于开发触屏设备上的应用程序。 6. **AJAX通信**:EXT内置了AJAX功能...

    ext 3.0 中文API

    6. **Charts**:EXT 3.0 提供了图表组件,支持各种类型的图表,如柱状图、折线图、饼图等,可用于数据可视化。 7. **Ajax**:EXT内建的Ajax模块提供了一种简便的方式与服务器进行异步通信,可以处理JSON、XML等多种...

    Ext 2 中文API Documentation

    4. **图表(Charts)**:EXT 2 提供了丰富的图表组件,如柱状图、折线图、饼图等,用于数据可视化。API文档会展示如何创建和配置这些图表,以及如何将数据源与图表关联。 5. **事件处理(Event Handling)**:EXT中...

    Ext4.1.0Doc_SUN.zip

    6. **图表和可视化**:EXT的图表组件在4.1版本中得到了增强,支持多种图表类型,如折线图、柱状图、饼图等,便于进行数据可视化。 7. **主题和皮肤**:EXT4.1提供了多种预定义的主题,如gray、silver、triton等,...

    Ext 3.0 中文文档

    8. **图表功能**:如果文档包含这部分内容,会介绍Ext的图表组件,如柱状图、折线图、饼图等,以及如何创建和定制图表。 9. **国际化与本地化**:讨论如何在Ext 3.0应用中实现多语言支持。 10. **最佳实践和性能...

    Ext手册中文pdf版本

    5. **图表组件**:Ext的图表组件支持创建各种复杂的统计图表,如折线图、柱状图、饼图等,有助于数据可视化。 6. **触摸支持**:Ext Touch是针对移动设备的版本,提供了一套专为触摸屏优化的组件和API,使开发者...

    EXT examples

    4. **图表组件**:EXT提供了一系列的图表组件,包括折线图、柱状图、饼图等,适用于数据分析和可视化。你可以通过示例了解如何加载数据、配置图例、轴线和数据系列。 5. **Ajax和远程数据交互**:EXT通过Store组件...

    Ext 中文帮助文档

    12. **图表组件**:提供了各种图表类型,如折线图、柱状图、饼图等,用于数据可视化。 13. **触摸支持**:Ext Touch是针对移动设备优化的版本,支持触屏操作,可以开发响应式的跨平台应用。 14. **国际化支持**:...

Global site tag (gtag.js) - Google Analytics