<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="HighchartsDemo._Default1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
汽油吸附脱硫装置2#S-ZORB
<!-- 注意文件名应该和你下载的文件名保持一致 -->
//<![CDATA[
$(function (datetimeCom, growth) {
// Highcharts.Chart Begin
Highcharts.setOptions({
global: {
useUTC: false //当X轴类型为datetime日期时间型的，需要设置时区
}
});
//声明报表对象
var chart = new Highcharts.Chart({
chart: {
//将报表对象渲染到层上
renderTo: 'container', //图表放置的容器，DIV
defaultSeriesType: 'spline', //图表类型为曲线图，可取值有：line、spline、area、areaspline、bar、column等
events: {
load: loadTime
}
}, //chart end
title: {
text: '汽油吸附脱硫装置2#S-ZORB曲线'
},
yAxis: {
title: {
text: '2#S-ZORB实时值'
}
},
xAxis: {
title: { text: '时间'
},
type: 'datetime',
//坐标间隔
labels: { step: 10,
// formatter: function () {
// return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
// }
}
},
//鼠标放在某个点上时的提示信息
//dateFormat,numberFormat是highCharts的工具类
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.xtime) + '<br/>' + this.x + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
//设定报表对象的初始数据
series: [{
name: '2#S-ZORB实时值',
data: []
}]
});
//获取初始化数据
getInitialData();
//Highcharts.Chart end
//获取初始化30分钟数据
function getInitialData() {
$.ajax({
type: "Post",
//后台获取数据的函数，注意当对该页面重命名时，
//必须手动更改该选项
url: "Default1.aspx/getInitialDataByAjax",
contentType: "application/json;charset=utf-8",
dataType: "json",
//成功获取数据
success: function (result) {
data = jQuery.parseJSON(result.d); //JSON再次转换为Table 形式；
var datetimeCom = '[';
var growth = '[';
for (var i = 0; i < data.length; i++) {
datetimeCom += "\'" + ConertJsonTimeAndFormat(data[i]["x"], 'yyyy/MM/dd hh:mm:ss') + "\',";
growth += data[i]["y"] + ",";
}
if (datetimeCom != '[') {
datetimeCom = datetimeCom.substr(0, datetimeCom.length - 1) + "]";
growth = growth.substr(0, growth.length - 1) + "]";
}
chart.xAxis[0].setCategories(eval(datetimeCom));
chart.series[0].setData(eval(growth));
//显示错误
},
error: function (err) {
alert(err + "初始化程序出现错误，请尝试刷新！");
}
});
}
// 每分钟获取后台数据
function getActualData() {
var x = (new Date()).getTime(); // 当前时间
$.ajax({
type: "Post",
//后台获取数据的函数，注意当对该页面重命名时，
//必须手动更改该选项
url: "Default1.aspx/getDataTableByAjax",
contentType: "application/json;charset=utf-8",
dataType: "json",
//成功获取数据
success: function (result) {
data = jQuery.parseJSON(result.d); //JSON再次转换为Table 形式；
var series = chart.series[0];
series.addPoint([data[0]["x"], data[0]["y"]], false, true);
// alert(data[0]["x"]);
// var datetimeCom = '[';
// for (var i = 0; i < data.length; i++) {
// datetimeCom += "\'" + data[i]["x"] + "\',";
// }
// if (datetimeCom != '[') {
// datetimeCom = datetimeCom.substr(0, datetimeCom.length - 1) + "]";
// }
// chart.xAxis[0].setCategories(eval(datetimeCom));
chart.redraw();
},
//显示错误
error: function (err) {
alert(err + "调用后台程序出现错误，请尝试刷新！");
}
});
}
function loadTime() {
window.setInterval(getActualData, 2000);
}
// $(document).ready(function () {
// //每隔1分钟自动调用方法，实现图表的实时更新 60000
// window.setInterval(getActualData, 2000);
// });
});
//]]>
// 后台Date前台转换json格式
function JsonDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
<div id="container" style="width: 800px; height: 600px; margin: 0 auto"></div>
后台传入数据格式为DataTable。
在线等啊，请高手指教！！！
