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

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

Ajax 
阅读更多
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
分享到：
| extjs ajax 与servlet 交互的一个例子
评论
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进入页面编辑就可以自由设计你的布局了，代码在查看/修改中可以看到，只需复制粘贴到自己...

Magicbox
Global site tag (gtag.js) - Google Analytics