需求:hightcharts跟ajax结合,取出数据并且在hightcharts中进行实时绘制曲线。
1 绘制曲线的js函数:
$(function(){
series_data1 = new Array();
series_data2 = new Array();
series_data3 = new Array();
series_data4 = new Array();
var chart;
getDate1();//对series_data1到series_data4进行初始化化,并且将该数据在曲线上进行渲染
function getForm(){
$.ajax({
type:"Post",
//后台获取数据的函数,注意当对该页面重命名时,
//必须手动更改该选项
url: "/Test16Web/airCondition/selectLastairCondition.action",
contentType:"application/json; charset=utf-8",
dataType:"json",
//成功获取数据
success:function (data){
//console.log(data.tempeture_1);
var series1= chart.series[0];
var series2 = chart.series[1];
var series3 = chart.series[2];
var series4 = chart.series[3];
var someDate = new Date(Date.parse(data.date));//把字符串类型专程Date类型
var tms=Date.UTC(someDate.getFullYear(), someDate.getMonth(), someDate.getDate(), someDate.getHours(),someDate.getMinutes(),someDate.getSeconds());//进行Date.UTC处理
var xt = (new Date()).getTime();
series1.addPoint([xt,parseFloat(data.tempeture_1)],true,false);
series2.addPoint([xt,parseFloat(data.tempeture_2)],true,false);
series3.addPoint([xt,parseFloat(data.tempeture_3)],true,false);
series4.addPoint([xt,parseFloat(data.tempeture_4)],true,false);
chart.redraw();
},
//显示错误
error:function (err){
console.log("error");
}
});
}
//获取后台数据
function getDate1(){
$.ajax({
type:"Post",
//后台获取数据的函数,注意当对该页面重命名时,
//必须手动更改该选项
url: "/Test16Web/airCondition/selectAllairCondition.action",
contentType:"application/json; charset=utf-8",
dataType:"json",
//成功获取数据
success:function (data){
for(var i = 0;i<data.length;i++){
var someDate = new Date(Date.parse(data[i].date));//把字符串类型专程Date类型
var tms=Date.UTC(someDate.getFullYear(), someDate.getMonth(), someDate.getDate(), someDate.getHours(),someDate.getMinutes(),someDate.getSeconds());//进行Date.UTC处理
var xt = (new Date()).getTime();
series_data1[i]=[someDate.getTime(),parseFloat(data[i].tempeture_1)];
series_data2[i]=[someDate.getTime(),parseFloat(data[i].tempeture_2)];
series_data3[i]=[someDate.getTime(),parseFloat(data[i].tempeture_3)];
series_data4[i]=[someDate.getTime(),parseFloat(data[i].tempeture_4)];
}
drawChart();
},
//显示错误
error:function (err){
alert(err + "调用后台程序出现错误,请尝试刷新!");
}
});
}
function drawChart(){
Highcharts.setOptions({
global: {
useUTC: false
}
});
//声明报表对象
chart = new Highcharts.Chart({
chart:{
//将报表对象渲染到层上
renderTo:'container' ,
defaultSeriesType:'spline'
}, //chart end
title:{
text:'空调实时曲线'
},
tooltip:{
formatter:function(){
return'<strong>'+this.series.name+'</strong>'+':'+this.y+'℃'+' '+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x);
}
},
yAxis:{
title:{
text:'温度℃'
} ,
crosshair: {
width: 1,
color: 'blue'
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
rotation: -45, //字体倾斜
align: 'right',
step: 1,
style: {
font: 'normal 13px 宋体'
},
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
}
},
crosshair: {
width: 1,
color: 'green'
}
},
credits: {
enabled: false //不显示LOGO
},
//设定报表对象的初始数据
series:[{
name:'温度1',
data:series_data1
} ,
{
name:'温度2',
data:series_data2
}, {
name:'温度3',
data:series_data3
}, {
name:'温度4',
data:series_data4
}]
}); //Highcharts end
}
$(document).ready(function() {
//每隔3秒自动调用方法,实现图表的实时更新
window.setInterval(getForm,6000);
});
});
其中 获取数据必须跟绘制表格的