日期:2014-05-16  浏览次数:20545 次

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.