需求：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); }); }); 其中 获取数据必须跟绘制表格的文章来源: hightchats的使用！