`
ynp
  • 浏览: 439530 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

heightChart 与extjs整合 动态生成历史曲线 和实时曲线

阅读更多
heightChart 与extjs整合 动态生成历史曲线 和实时曲线

附件为 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  
值得好好学习,不过要是能直接上传个能运行的示例就更好了,至少我经常那么干

相关推荐

    ExtJs动态grid的生成

    我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...

    extjs动态生成表格,前台+后台

    动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    extjs4.2 动态生成toolbar

    "ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮...使用 ExtJS 4.2 动态生成 Toolbar 需要在视图层、Toolbar.js 和后台调用创建工具栏的方法中进行配置和实现。

    extjs动态生成model、store、panel

    extjs动态生成model、store、panel;sql拼接等多种技术难点

    ExtJs代码自动生成

    在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** ...

    extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式

    在描述中提到的博客链接指向了一个ITEYE上的技术文章,虽然具体内容未给出,但可以推断作者分享了如何利用ExtJS框架动态生成开始菜单和多级菜单的快捷方式。这通常包括以下几个关键知识点: 1. **ExtJS框架基础**:...

    extjs界面生成器extjs界面生成器extjs界面生成器

    extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器

    extjs 实现动态表头

    动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...

    Struts2与extjs整合例子

    这个整合示例将帮助开发者理解如何将Struts2的后端控制与ExtJS的前端展示无缝对接,实现高效的数据交互和动态界面更新。在学习过程中,建议深入研究两个框架的文档,了解它们的API和最佳实践,以便在实际项目中更好...

    Django1.6与extjs4整合

    **标题:“Django1.6与ExtJS4整合”** **描述:** 本文将深入探讨如何将Django 1.6这一...通过以上知识点的学习,开发者能够了解Django 1.6与ExtJS 4整合的基本步骤和技巧,从而实现高效、功能强大的Web应用开发。

    EXTJS代码生成器

    EXTJS代码生成器是一款专为开发人员设计的工具,它能够自动生成基于EXTJS框架的MVC模式应用程序的代码,显著提升开发效率。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用,提供了丰富的组件库和强大的...

    spring+mvc+mybatis+extjs整合

    【标题】"spring+mvc+mybatis+extjs整合"是一个经典的Java Web开发框架组合,广泛应用于企业级应用。这个项目结合了Spring MVC作为控制层,MyBatis作为数据访问层,以及ExtJS作为前端展示层,构建了一个完整的三层...

    extjs_dwr整合例子

    **整合ExtJS和DWR** 的主要目标是实现前端UI与后端业务逻辑的无缝对接。以下是一些整合的关键步骤: 1. **安装和配置DWR**: 首先,你需要在服务器端集成DWR。这通常涉及在项目中添加DWR的jar包,配置web.xml文件,...

    Extjs主界面生成导航

    Extjs主界面生成导航知识点 Extjs主界面生成导航是使用Extjs框架创建主界面导航系统的过程。...生成Extjs主界面导航需要合理地配置Tree Panel、TreeStore、Model和View,并将其组合起来以便生成一个完整的导航系统。

    ASP.NET结合EXTJS动态生成Grid列表的例子程序源码

    当需要动态生成Grid列表时,后端需要提供数据,并定义Grid的结构和样式。以下是实现这一功能的关键步骤: 1. **后端数据准备**:在ASP.NET中,可以使用ADO.NET、Entity Framework或其他ORM工具从数据库获取数据。...

    extjs点击右侧面板生成tab

    extjs点击右侧面板生成tab,面板是ul+li的

    extjs实现动态树

    总之,通过深入理解和灵活运用上述概念和方法,我们可以创建出交互性强、响应迅速的ExtJS动态树应用,同时结合Accordion布局提供更丰富的用户界面。在实际开发中,应根据项目需求和性能考虑,合理配置和优化动态树的...

    extjs页面布局生成器

    很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压-&gt;添加文件夹到一个web工程当中-&gt;进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...

Global site tag (gtag.js) - Google Analytics