<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问我相关的问题,很多问题都是很基础的,所以希望有问题的同学先仔细阅读博客里的文字,文字已经描述得很清楚,只要你按照要求来是不会出问题的。当然如果你实在解决不了,我很乐意协助.
相关推荐
在本案例中,我们关注的是"Ext 折线图",这涉及到一个JavaScript库——ExtJS,它是一个用于构建富客户端Web应用的框架。ExtJS提供了丰富的组件库,其中包括图表组件,可以方便地创建各种类型的图表,如折线图。 ...
在给定的"ExtJS 制作折线图"主题中,我们将深入探讨如何使用ExtJS 的lineChart组件来创建动态、交互式的折线图。 首先,让我们了解什么是折线图。折线图是一种统计图表,通过连接一系列数据点来显示数值的变化趋势...
对于折线图,我们同样使用`Ext.chart.Chart`,但设置`series.type`为'line'。饼状图则需要设置`series.type`为'pie',并指定`donut`属性来控制饼图的内径大小。 在处理数据时,EXT4.0支持多种数据源,可以是JSON...
在这个特定的场景中,"ExtJs双折线图"是指使用Ext Js库来创建具有两组数据的折线图表。这种图表类型在数据分析和可视化中非常常见,可以用来比较两个变量随时间的变化趋势。 首先,创建一个双折线图需要对Ext Js的...
在ExtJS中,使用`Ext.chart.Chart`和`Ext.chart.series.Line`系列配置可以创建折线图。你可以设置线的样式、点的标记,以及时间轴的格式化。以下是一个折线图的例子: ```javascript Ext.application({ name: 'App...
Ext.Chart基于Sencha的YUI Charts库,提供了多种图表类型,如折线图、柱状图、饼图、散点图等。这些图表能够通过配置选项定制样式,包括颜色、线条宽度、数据标签等,以满足各种需求。 动态数据是指图表的数据源...
4. **强大的图表库**:EXT包含一个完整的图表组件,可以生成各种统计和数据分析图表,如折线图、柱状图、饼图等。 5. **触摸支持**:EXT4.2.1优化了对触摸设备的支持,使得在平板电脑和智能手机上也能流畅操作。 6. ...
在EXTJS4中,创建折线图是一种常用的数据可视化方式,可以帮助用户直观地理解数据变化趋势。本实例主要讲解如何利用EXTJS4的图表功能来实现动态数据的折线图展示,包括从后端获取数据并展示在图表上,以及查询每年...
Charts是EXT3.0中的一个亮点,它支持各种类型的图表,如柱状图、折线图、饼图和散点图。通过API,开发者可以自定义图表的颜色、样式、数据源和交互行为,为数据可视化提供强大的工具。 除此之外,EXT3.0还包括了...
这些图表包括折线图、柱状图、饼图、散点图、面积图等,能够满足大多数数据可视化的需要。通过这些图表,用户可以直观地理解大量复杂数据。 在实现图形报表时,首先需要了解Ext.chart.Chart组件,它是ExtJS图表的...
8. 图表(Charts):EXT 3.3的图表组件,如何创建各种统计图表,如柱状图、折线图等。 9. 性能优化(Performance Optimization):提供了一些提高EXT 3.3应用程序性能的技巧和策略。 10. API参考(API Reference):...
4. **高级图表**:EXT提供了多种图表类型,如折线图、柱状图、饼图等,可用于数据可视化。 5. **触摸支持**:EXT Touch是EXT的移动版本,专门用于开发触屏设备上的应用程序。 6. **AJAX通信**:EXT内置了AJAX功能...
6. **Charts**:EXT 3.0 提供了图表组件,支持各种类型的图表,如柱状图、折线图、饼图等,可用于数据可视化。 7. **Ajax**:EXT内建的Ajax模块提供了一种简便的方式与服务器进行异步通信,可以处理JSON、XML等多种...
4. **图表(Charts)**:EXT 2 提供了丰富的图表组件,如柱状图、折线图、饼图等,用于数据可视化。API文档会展示如何创建和配置这些图表,以及如何将数据源与图表关联。 5. **事件处理(Event Handling)**:EXT中...
6. **图表和可视化**:EXT的图表组件在4.1版本中得到了增强,支持多种图表类型,如折线图、柱状图、饼图等,便于进行数据可视化。 7. **主题和皮肤**:EXT4.1提供了多种预定义的主题,如gray、silver、triton等,...
8. **图表功能**:如果文档包含这部分内容,会介绍Ext的图表组件,如柱状图、折线图、饼图等,以及如何创建和定制图表。 9. **国际化与本地化**:讨论如何在Ext 3.0应用中实现多语言支持。 10. **最佳实践和性能...
5. **图表组件**:Ext的图表组件支持创建各种复杂的统计图表,如折线图、柱状图、饼图等,有助于数据可视化。 6. **触摸支持**:Ext Touch是针对移动设备的版本,提供了一套专为触摸屏优化的组件和API,使开发者...
4. **图表组件**:EXT提供了一系列的图表组件,包括折线图、柱状图、饼图等,适用于数据分析和可视化。你可以通过示例了解如何加载数据、配置图例、轴线和数据系列。 5. **Ajax和远程数据交互**:EXT通过Store组件...
12. **图表组件**:提供了各种图表类型,如折线图、柱状图、饼图等,用于数据可视化。 13. **触摸支持**:Ext Touch是针对移动设备优化的版本,支持触屏操作,可以开发响应式的跨平台应用。 14. **国际化支持**:...