- 浏览: 439530 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (211)
- 思考》感想 (11)
- 数据库操作 譬如Oracle大叔 (7)
- java,咱们有缘吗 (16)
- delphi,你还好吗 (2)
- SSH,哥三儿好 (31)
- 问题!问题?问题!? (9)
- WITH WORK (1)
- 算法与模式 莫事^_^ (10)
- JSP,可以叫你P兄么 (2)
- 啊,咋科斯╮(╯▽╰)╭ (6)
- 巨人肩上的小石子 (2)
- flash她妹flex (38)
- 项目管理 (10)
- 奥特曼,你弟Android来了 (4)
- 麻辣儿gis (0)
- maven 嘛味儿 (3)
- ws 哇塞 webservice (5)
- Oh,no!!!,NoSql (1)
- QQ他哥也是个企鹅,Linux (6)
- 姓i还是姓my 你都叫batis ibatis (3)
- 我喜欢夏天(春天旁边的那个季节)Springside (1)
- 测试! 测就测吧,没有喝(⊙o⊙) (3)
- 是晕+_+ 是浮云 还是云计算 (4)
- ExtJS 你是flex他哥还是他妹 (10)
- svg 你丫的资料真少 (3)
- 叫屁屁还是叫加加 ⊙﹏⊙ c++ (5)
- 鸟,还是只百灵鸟 BIRT (1)
- 权限管理 有权真好 是吧-_-! (1)
- SSH (2)
- 哥三儿好 (2)
- nginx (1)
- Oh (1)
- no!!! (1)
- NoSql (1)
最新评论
-
mong619226543:
谢谢
No identifier specified for entity -
akka_li:
没看懂啥意思!什么原因导致java.net.SocketExc ...
java.net.SocketException: Connection reset 问题解决方法 -
west_jing:
1L正解,<mvc:annotation-driven/ ...
<mvc:default-servlet-handler/> 导致 Controller失效 -
u010954806:
tgfhfdhdf
Spring Security 国际化文件 messages_zh_CN.properties 中文解释 -
yenshen:
我也碰到这个问题了,找了一大圈,最终问题解决了:<con ...
<mvc:default-servlet-handler/> 导致 Controller失效
heightChart 与extjs整合 动态生成历史曲线 和实时曲线
附件为 heightChart 与extjs整合的适配器和组件
动态生成历史曲线
动态生成实时曲线
不引用肯定报错啊 ,咱们这个例子就是用的heightchart库,附件应该能运行吧,我记得当时测过的啊,很久的东东了。
请问是怎么解决的。。求告知,谢谢了!
引入highcharts.js这个就行了 src是带源码的。这个demo写的有段时间了,都忘了。你再试试吧
搞定了 这个错误我一个月前就碰到过 当时百撕不得骑姐 现在骑上了
引入highcharts.js这个就行了 src是带源码的。这个demo写的有段时间了,都忘了。你再试试吧
去附件下吧。
附件为 heightChart 与extjs整合的适配器和组件
动态生成历史曲线
Ext.onReady(function(){ var dataStr = "{" + "lineChName:['2011断路器_A项电流','2011断路器_B项电流','2011断路器_C项电流']," + "time:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']," + "data:[" + "[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]," + "[null,4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]," + "[3,6.2, 0, 3.5, 2.9, 15.2, 7.0, 19.6, 6.2, 8.3, 2.6, 3.8]" + "]" + "}"; function getData(dataStr){ var dataObj = Ext.decode(dataStr); var xAxisArr = dataObj.time;///曲线x轴数据数组 var charDataArr = dataObj.data;//曲线y轴数据数组 var lineChName = dataObj.lineChName;//曲线名称数组 var series = [];//曲线 for(var i=0;i<charDataArr.length;i++){ var tempSerie = {}; tempSerie.name = lineChName[i]; tempSerie.data = charDataArr[i]; series.push(tempSerie); } hdrchart.chartConfig.xAxis.categories = xAxisArr; hdrchart.chartConfig.series = series; } var hdrchart = new Ext.ux.HighChart({ titleCollapse: true, layout:'fit', border: true, id: 'hchart', chartConfig: { chart: { // id: 'hchart', // marginRight: 200,//可选,控制报表位置 // marginBottom: 200,//可选,控制报表位置 defaultSeriesType: 'line' // margin: [50, 150, 60, 80] }, title: { text: '2011断路器 时间:xxxx年yy月zz日 hh:mm:ss 到 xxxx年yy月zz日 hh:mm:ss 电流值', style: { // margin: '10px 100px 0 0' // center it } }, /* subtitle: { text: '2011断路器', style: { // margin: '0 100px 0 0' // center it } },*/ xAxis: { /* categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],*/ title: { // text: 'Month' }, tickInterval: 4//刻度间隔值 就是x轴 4个数据单位 写一个x值 //min: 0, //max: -1//标签个数-1 }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [ { value: 0, width: 1, color: '#808080' } ] }, tooltip: { shared : true, crosshairs : true /* formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; }*/ }, legend: { layout: 'vertical', style: { left: 'auto', bottom: 'auto', right: '10px', top: '100px' } }/*, series: [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] },{ name: 'London', data: [ 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]*/ } }); var hdrWin = new Ext.Window({ id:"hdrwin", title: '历史曲线', // width:500, // height:300, layout:'fit', closeAction:'hide', // modal:true, maximized:true, items: [ hdrchart ] }); getData(dataStr); hdrWin.show(); });
动态生成实时曲线
/** * 实时曲线模拟程序 */ Ext.onReady(function(){ //第一次交互数据 var dataStr = "{" + "lineChName:['2011断路器_A项电流','2011断路器_B项电流','2011断路器_C项电流']," + // "lineChName:['2011断路器_A项电流']," + "time:'10:08:44',"+ "data:[1,2,3]"+ "}"; /* //第二次交互数据 var dataStr = "{" + "time:'10:08:44',"+ "data:[1,2,3]"+ "}";*/ var seriesCount = 0 ;//曲线数量 var series = [];//曲线 function getData(dataStr){ var dataObj = Ext.decode(dataStr); var xData = timeStrToData(dataObj.time);//x时间轴值 var chartData = dataObj.data;//y轴数据 //第一次交互有lineChName属性 if(dataObj.lineChName){ var lineChName = dataObj.lineChName;//曲线名称数组 seriesCount = lineChName.length; for(var i=0;i<seriesCount;i++){ var tempSerie = {}; tempSerie.name = lineChName[i];//曲线名称 var initArr = createTempData(); // initArr.push({x:xData,y:chartData[i]}); tempSerie.data = initArr; series.push(tempSerie); } }else{ //第二次交互数据 } hdrchart.chartConfig.series = series; } // 根据时间字符串04:09:34.923,构造时间 function timeStrToData(str){ var pointIndex = str.indexOf('.'); var milliseSec = parseInt(str.substring(pointIndex+1),10); var tempArr = str.substring(0,pointIndex).split(':'); var dateTime = new Date(); dateTime.setHours(parseInt(tempArr[0],10)); dateTime.setMinutes(parseInt(tempArr[1],10)); dateTime.setSeconds(parseInt(tempArr[2],10)); dateTime.setMilliseconds(milliseSec); return dateTime; } var hdrchart = new Ext.ux.HighChart({ titleCollapse: true, layout:'fit', border: true, id: 'hchart', chartConfig: { chart: { // id: 'hchart', // marginRight: 200,//可选,控制报表位置 // marginBottom: 200,//可选,控制报表位置 defaultSeriesType: 'spline' // margin: [50, 150, 60, 80] }, title: { text: '2011断路器电流实时曲线', style: { // margin: '10px 100px 0 0' // center it } }, /* subtitle: { text: '2011断路器', style: { // margin: '0 100px 0 0' // center it } },*/ xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [ { value: 0, width: 1, color: '#808080' } ] }, tooltip: { shared : true, crosshairs : true /* formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; }*/ }, plotOptions: { series: { marker: { enabled: false //隐藏点 } } }, legend: { layout: 'vertical', style: { left: 'auto', bottom: 'auto', right: '10px', top: '100px' } }/*, series: [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] },{ name: 'London', data: [ 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]*/ } }); var hdrWin = new Ext.Window({ id:"hdrwin", title: '实时曲线', // width:500, // height:300, layout:'fit', closeAction:'hide', // modal:true, maximized:true, items: [ hdrchart ] }); getData(dataStr); function createTempData(){ var data = [], time = (new Date()).getTime(), i; for (i = -50; i <= 0; i++) { data.push({ x: time + i * 1000, y: 0 }); } return data; //hdrchart.chartConfig.series[0].data = data; } hdrWin.show(); //第二次交互模拟方法 function createData(){ setInterval(function() { var x = (new Date()).getTime(), // current time y = Math.random(); z = Math.random(); k = Math.random(); hdrchart.chart.series[0].addPoint([x, y], true, true); hdrchart.chart.series[1].addPoint([x, z], true, true); hdrchart.chart.series[2].addPoint([x, k], true, true); }, 1000); } createData(); });
- js.rar (287.1 KB)
- 下载次数: 171
评论
9 楼
ynp
2014-11-27
565452030 写道
不知道楼主还在么。。现在我也刚刚好要用到这个,看了之后很有启发,看了楼上的,我也没引入highcharts.src.js 。但是我把demo和附件下来引用后也是报错:无法获取属性“x”的值: 对象为 null 或未定义(highcharts.js, 行44 字符467),请问还有其他解决方案么啊。。谢谢了
不引用肯定报错啊 ,咱们这个例子就是用的heightchart库,附件应该能运行吧,我记得当时测过的啊,很久的东东了。
8 楼
565452030
2014-11-26
东川々靖竹 写道
楼主,为什么我把附件引用之后会报JS错误, TypeError: e.page is undefined,highcharts.src.js (第 6582 行),这个问题你碰到过没,求解决。。。。。。。。。。。。
请问是怎么解决的。。求告知,谢谢了!
7 楼
565452030
2014-11-26
不知道楼主还在么。。现在我也刚刚好要用到这个,看了之后很有启发,看了楼上的,我也没引入highcharts.src.js 。但是我把demo和附件下来引用后也是报错:无法获取属性“x”的值: 对象为 null 或未定义(highcharts.js, 行44 字符467),请问还有其他解决方案么啊。。谢谢了
6 楼
东川々靖竹
2013-05-16
ynp 写道
东川々靖竹 写道
楼主,为什么我把附件引用之后会报JS错误, TypeError: e.page is undefined,highcharts.src.js (第 6582 行),这个问题你碰到过没,求解决。。。。。。。。。。。。
引入highcharts.js这个就行了 src是带源码的。这个demo写的有段时间了,都忘了。你再试试吧
搞定了 这个错误我一个月前就碰到过 当时百撕不得骑姐 现在骑上了
5 楼
ynp
2013-05-14
东川々靖竹 写道
楼主,为什么我把附件引用之后会报JS错误, TypeError: e.page is undefined,highcharts.src.js (第 6582 行),这个问题你碰到过没,求解决。。。。。。。。。。。。
引入highcharts.js这个就行了 src是带源码的。这个demo写的有段时间了,都忘了。你再试试吧
4 楼
东川々靖竹
2013-05-14
楼主,为什么我把附件引用之后会报JS错误, TypeError: e.page is undefined,highcharts.src.js (第 6582 行),这个问题你碰到过没,求解决。。。。。。。。。。。。
3 楼
ynp
2013-04-10
liuyajun 写道
你好,我按你发的"动态生成历史曲线 "例子做了,为什么我的页面上是空白呢,js也没有报错,你用的highcharts的版本是多少?还有那个和Ext结合的插件js能发出来吗?问题较急,望看见了回复一下,谢谢
去附件下吧。
2 楼
liuyajun
2013-04-09
你好,我按你发的"动态生成历史曲线 "例子做了,为什么我的页面上是空白呢,js也没有报错,你用的highcharts的版本是多少?还有那个和Ext结合的插件js能发出来吗?问题较急,望看见了回复一下,谢谢
1 楼
cuisuqiang
2012-06-29
值得好好学习,不过要是能直接上传个能运行的示例就更好了,至少我经常那么干
发表评论
-
Flex4多文件上传示例
2014-05-17 22:59 882---》Flex <?xml version=&quo ... -
FLEX 与 JSP 视图的结合开发
2014-03-26 17:08 1157FLEX 与 JSP 视图的结合开发 虽然用了flex作了视 ... -
Extjs 、Flex 组件通过事件解耦示例
2013-10-09 17:18 920Extjs 、Flex 组件通过事件解耦示例 ---》app ... -
flex 上传excel 导入数据库
2011-06-13 12:01 6811flex 上传excel 导入数据库 前端用flex上传ex ... -
flex 、servlet生成验证码方式
2011-05-05 14:07 1201flex 、servlet生成验证码方式 -----》fle ... -
中文命名的图片加载后 本地能显示 但放到服务器上就出不来了
2011-02-22 16:16 2717中文命名的图片加载后 本地能显示 但放到服务器上就出不来了 ... -
flex 程序减肥几种方法
2011-02-17 14:05 992flex 程序减肥几种方法 1、采用模块化管理 2、采用RS ... -
flex动态换肤的demo例子
2011-02-17 09:30 1329flex动态换肤的demo例子 ----》建立三个css样 ... -
as3的反射
2011-01-28 17:30 1256as3的反射 ------》getDefinitionByN ... -
AIR 应用: 黏贴 剪贴板中的图片
2011-01-24 11:14 1461AIR 应用: 黏贴 剪贴板中的图片 from : http: ... -
flex 权限系统研究
2011-01-12 15:59 1678f权限一般就是涉及增删改查 的操作。 思路,利用flex-s ... -
如何在左上角画图
2010-12-31 10:50 1406如何在左上角画图 我想在屏幕左上角 画一个正方形,按下面的代码 ... -
类似javadoc功能的 flex asdoc
2010-12-21 10:33 1279配置过程 可以参考 http://bhsc-happy.ite ... -
Printing Multiple Pages Using PrintDataGrid(Flex打印系列 转载)
2010-12-20 14:08 1229In the previous tutorial, we kn ... -
Flash Builder 找不到所需的 Adobe Flash Player 调试器版本 问题解决
2010-12-15 13:28 5672Flash Builder 找不到所需的 Adobe Flas ... -
Cairngrom Demo程序撰写心得
2010-12-10 14:42 1099------》执行顺序 初始化事件与处理进行绑定组件( ... -
felx包含到jsp中去
2010-10-08 15:05 1496Jsp包含到flex中用iframe; Flex包含到jsp中 ... -
为什么定义事件用<mx:Metadata> 标签
2010-10-08 11:01 3322定义方法方式: <mx:Metadata> ... -
mate框架应用几点心得
2010-09-29 11:23 1203mate框架应用几点心得 *** new 事件的时候一定要冒 ... -
后台的返回的结果集是object类型的,不是具体对象?
2010-09-14 14:43 1436后台的返回的结果集是object类型的,不是具体对象? 解决方 ...
相关推荐
我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...
动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...
Extjs动态Grid的生成 htm
"ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮...使用 ExtJS 4.2 动态生成 Toolbar 需要在视图层、Toolbar.js 和后台调用创建工具栏的方法中进行配置和实现。
extjs动态生成model、store、panel;sql拼接等多种技术难点
在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** ...
在描述中提到的博客链接指向了一个ITEYE上的技术文章,虽然具体内容未给出,但可以推断作者分享了如何利用ExtJS框架动态生成开始菜单和多级菜单的快捷方式。这通常包括以下几个关键知识点: 1. **ExtJS框架基础**:...
extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器
动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...
这个整合示例将帮助开发者理解如何将Struts2的后端控制与ExtJS的前端展示无缝对接,实现高效的数据交互和动态界面更新。在学习过程中,建议深入研究两个框架的文档,了解它们的API和最佳实践,以便在实际项目中更好...
**标题:“Django1.6与ExtJS4整合”** **描述:** 本文将深入探讨如何将Django 1.6这一...通过以上知识点的学习,开发者能够了解Django 1.6与ExtJS 4整合的基本步骤和技巧,从而实现高效、功能强大的Web应用开发。
EXTJS代码生成器是一款专为开发人员设计的工具,它能够自动生成基于EXTJS框架的MVC模式应用程序的代码,显著提升开发效率。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用,提供了丰富的组件库和强大的...
【标题】"spring+mvc+mybatis+extjs整合"是一个经典的Java Web开发框架组合,广泛应用于企业级应用。这个项目结合了Spring MVC作为控制层,MyBatis作为数据访问层,以及ExtJS作为前端展示层,构建了一个完整的三层...
**整合ExtJS和DWR** 的主要目标是实现前端UI与后端业务逻辑的无缝对接。以下是一些整合的关键步骤: 1. **安装和配置DWR**: 首先,你需要在服务器端集成DWR。这通常涉及在项目中添加DWR的jar包,配置web.xml文件,...
Extjs主界面生成导航知识点 Extjs主界面生成导航是使用Extjs框架创建主界面导航系统的过程。...生成Extjs主界面导航需要合理地配置Tree Panel、TreeStore、Model和View,并将其组合起来以便生成一个完整的导航系统。
当需要动态生成Grid列表时,后端需要提供数据,并定义Grid的结构和样式。以下是实现这一功能的关键步骤: 1. **后端数据准备**:在ASP.NET中,可以使用ADO.NET、Entity Framework或其他ORM工具从数据库获取数据。...
extjs点击右侧面板生成tab,面板是ul+li的
总之,通过深入理解和灵活运用上述概念和方法,我们可以创建出交互性强、响应迅速的ExtJS动态树应用,同时结合Accordion布局提供更丰富的用户界面。在实际开发中,应根据项目需求和性能考虑,合理配置和优化动态树的...
很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...