Highcharts 动态曲线图

  

$(function (){
	Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
});

 

var chart;
var varseries; 
// 动态曲线图
function b(){
     chart = new Highcharts.Chart({   
        chart:{   
        // 将报表对象渲染到层上
        renderTo:'container2' ,  
        defaultSeriesType:'spline',
        marginRight: 10
    }, // chart end
    title:{  
       text:'辛加涛  动态曲线图'         
    },  
    yAxis:{  
        title:{  
           text:'PCA值'             
        },
        tickPositions: [-10,-5,0,5,10,15, 20,25,30,35,40,45,50,55,60,70,80,90,100], //指定竖轴坐标点的值
        //指定y 直线的样式
        plotLines: [
          {
            value: 0,
            width: 1,
            color: '#808080'
          }
        ]
    },
    
/*    xAxis: {
        type: 'datetime',
        labels: {  
            step: 4,   
            formatter: function () {  
                return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S' , this.value);  
            }  
        } 
    },*/
    
    xAxis: {
        title: {
          text: '时间'
        },
        //linear" or "datetime"
        type: 'datetime',
        //坐标间隔
        tickPixelInterval: 150
     },
     
     //鼠标放在某个点上时的提示信息
     //dateFormat,numberFormat是highCharts的工具类
     tooltip: {
       formatter: function() {
         return '<b>' + this.series.name + '</b><br/>' +
                 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                 Highcharts.numberFormat(this.y, 2);//2数据保留2位小数
       }
     },
    
    legend: {
        enabled: true
    },
    exporting: {
        enabled: true
    },
    
    // 设定报表对象的初始数据
/*    series:[{   
       data:[0,0] 
    }]*/ 
    series: [{
        name: 'Random data',
        data: (function() {                          
            var data = [],
            time = (new Date()).getTime(),
            i;
            for (i = -19; i <= 0; i++) {
                data.push({
                    x: time + i * 1000,
                    y: 0
                });
            }
            return data;
        })()
    }]
});  // Highcharts.Chart end
     varseries = chart.series[0];
     run();
}

var interval;
function run(){
	interval = setInterval(functiongetForm,1000);     
}

// 获取后台数据
function functiongetForm(){  
	$.ajax({
		type: 'POST',
		url: $.contextPath + "/DemoAction.do?method=quxianPic",
		dataType: 'json',
		success: function(rdata) {
     	   // data= jQuery.parseJSON(data); 
    	   varseries.addPoint([rdata.x,rdata.y],true,true);
           chart.redraw();
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
		}
	});
}

 

/**
	 * 动态曲线图
	 */
	public ActionForward quxianPic(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		System.out.println("进入quxianPic Action");
		try {
			JSONObject jsonObject = jsonObject = new JSONObject();

			jsonObject = new JSONObject();
			int x = (int) (Math.random() * 50);
			int y = (int) (Math.random() * 50);

			jsonObject.put("x", new Date().getTime());
			jsonObject.put("y", y);
			// 返回
			RiaUtils.writeJsonText2Page(jsonObject.toString(), response);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}