`
ynp
  • 浏览: 428915 次
  • 性别: 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  
值得好好学习，不过要是能直接上传个能运行的示例就更好了，至少我经常那么干
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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