最近在用HighCharts画趋势图，如果按照设计文档上来画那太复杂了，于是根据自己多年的经验改动了设计文档，添加了highcharts的标示区，然而我也发现，最后一次画highchart趋势图还是在2年前，现在居然都不知道怎么画了(其实也不是不会画，只不过给的开发时间紧，而且我又是个急子，所以觉得加速完成，然而越急就越画不好，这点我离葛经理还差很远，所以要加强这方面的培训)，熟悉之后才慢慢从它的API中解脱出来，下面贴代码吧：
$(function () {
$.fn.zTree.init($("#search_tree"), swhTreeObj);
initTable();
initDate();
$(".td-title").hide();
$("#dlg").dialog({
width: 340,
height: 410,
modal: true,
title: '检修单信息',
closed: true,
buttons: [{
text: '确定',
iconCls: 'icon-save',
plain: true,
handler: function () {
$("#dlg").dialog('close');
}
}]
});
});
var tid = "";
function query() {
$("#charts").empty();
var treeObj = $.fn.zTree.getZTreeObj("search_tree");
var node = treeObj.getSelectedNodes();
var selPortGrid = $('#selPort').combogrid('grid');
var selProjectGrid = $('#selProject').combogrid('grid');
var selPortGridData = selPortGrid.datagrid('getSelections');
var selProjectGridData = selProjectGrid.datagrid('getSelections');
var kssj = $("#kssj").val();
var jssj = $("#jssj").val();
var id = [];
for (var i = 0; i < selProjectGridData.length; i++) {
id.push(selProjectGridData[i].Id);
}
$.post('/AjaxSwitchAnalysis/QueryResult.cspx', {
switchmac: node[0].Mac,
projectid: id.join(','),
kssj: kssj,
jssj: jssj
}, function (obj) {
if (typeof obj != "undefined" && obj != null) {
var val = obj.data;
var timedata = [];
for (var n = 0; n < obj.repairData.length; n++) {
tid = obj.repairData[n].Id;
timedata.push({
color: '#E0ECFF',
from: convertToUTC(obj.repairData[n].BeginTime),
to: convertToUTC(obj.repairData[n].EndTime),
//zIndex: 3,
label: { text: obj.repairData[n].BeginTime + ' 到 ' + obj.repairData[n].EndTime + " 的检修工作", style: {
color: 'red'
}
},
events: {
click: function (e) {
$.getJSON('/AjaxSwitchRepair/GetDataById.cspx', { id: tid }, function (tval) {
$("#dlg").dialog('open');
$("#begintime").val(tval[0].BeginTime);
$("#endtime").val(tval[0].EndTime);
$("#content").val(tval[0].Content);
$("#reason").val(tval[0].Reason);
$("#operator").val(tval[0].Operator);
$("#device").val(tval[0].SwitchName);
$("#device").attr('title', tval[0].SwitchName);
});
}
}
});
}
var charts = [];
//根据不同的项目类型进行项目分组
//遍历用户选中的所有项目
for (var k = 0; k < selProjectGridData.length; k++) {
var data = [];
var flag = false;
//遍历从后台返回的数据
for (var i = 0; i < val.length; i++) {
//判断项目类型是否是端口流量，如果是就要解析json数据
if (selProjectGridData[k].Id == val[i].Id) {
if (val[i].ProjectType != "json") {
data.push([convertToUTC(val[i].InspectDate), parseInt(val[i].Value)]);
} else {
//端口的计算已经在this的地方存到charts了，所以不能再把端口再push进charts,因此要加flag标识一下
flag = true;
//解析端口json数据
var json = $.parseJSON(val[i].Value);
for (var l = 0; l < selPortGridData.length; l++) {
data = [];
var name = "";
var f = false;
for (var m = 0; m < json.length; m++) {
if (selPortGridData[l].Port == json[m].name) {
data.push([convertToUTC(val[i].InspectDate), parseInt(json[m].value)]);
name = selPortGridData[l].Port;
}
}
//判断端口是否已经存在，如果存在就要添加进去(目的是为了画出线)
for (var s = 0; s < charts.length; s++) {
for (var t = 0; t < charts[s].length; t++) {
if (charts[s][t].name == name) {
f = true;
charts[s][t].data.push(data[0]);
break;
}
}
}
if (!f) {
//this
charts.push([{ name: name, data: data, yAxis: 0}]);
}
}
}
}
}
if (!flag) {
charts.push([{ name: selProjectGridData[k].Name, data: data, yAxis: 0}]);
}
}
//判断要显示两个y轴还是一个y轴
if (charts.length == 2) {
$('<div id="container1" style="height: 400px;border-bottom:1px solid #95B8E7;border-top:1px solid #95B8E7;margin-bottom:20px;"></div>').appendTo("#charts");
for (var r = 0; r < charts[1].length; r++) {
charts[1][r].yAxis = 1;
}
initTwoCharts("container1", charts[0].concat(charts[1]), timedata);
} else {
for (var j = 0; j < charts.length; j++) {
$('<div id="container' + j + '" style="height: 400px;border-bottom:1px solid #95B8E7;border-top:1px solid #95B8E7;margin-bottom:20px;"></div>').appendTo("#charts");
initCharts("container" + j, charts[j], timedata);
}
}
}
}, 'json');
}
function convertToUTC(val) {
var year = val.split(' ')[0].split('-')[0];
var month = val.split(' ')[0].split('-')[1];
var day = val.split(' ')[0].split('-')[2];
var h = val.split(' ')[1].split(':')[0];
var m = val.split(' ')[1].split(':')[1];
var s = val.split(' ')[1].split(':')[2];
return Date.UTC(year, month, day, h, m, s);
}
function initDate() {
var myDate = new Date();
$("#jssj").val(myDate.Format("yyyy-MM-dd"));
myDate.setMonth(myDate.getMonth() - 1);
$("#kssj").val(myDate.Format("yyyy-MM-dd"));
}
//初始化datagrid
var initTable = function () {
$("#selProject").combogrid(selProjectObj);
};
//列表对象
var selProjectObj = {
panelWidth: 200,
multiple: true,
idField: 'Id',
textField: 'Name',
url: '/AjaxInspectProject/QueryProject.cspx',
method: 'get',
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'Id', hidden: true },
{ field: 'Name', title: '项目名称', width: 80 }
]],
onCheck: function (index, row) {
if (row.ProjectType == "json" && row.Name == "端口流量") {
$(".td-title").show();
}
},
onUncheck: function (index, row) {
if (row.ProjectType == "json" && row.Name == "端口流量") {
$(".td-title").hide();
}
},
fitColumns: true
};
var selPortObj = {
panelWidth: 200,
multiple: true,
idField: 'Id',
textField: 'Port',
url: '/AjaxSwitcherPortInfo/QueryPortBySwitch.cspx',
queryParams: { switchmac: '' },
method: 'get',
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'Id', hidden: true },
{ field: 'Port', title: '端口名称', width: 80 }
]],
fitColumns: true
};
function initCharts(id, data, timearea) {
$('#' + id).highcharts({
title: {
text: '巡检项目趋势图',
x: -20 //center
},
xAxis: {
//x轴为时间类型
type: 'datetime',
//设置x轴间隔时间为一天
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
plotBands: timearea
},
yAxis: [{
min: 0,
title: {
text: '巡检值'
}
}],
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S'//鼠标移动到趋势线上时显示的日期格式
},
series: data,
//去掉highcharts.com链接
credits: {
enabled: false
}
});
}
function initTwoCharts(id, data, timearea) {
$('#' + id).highcharts({
title: {
text: '巡检项目趋势图',
x: -20 //center
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
},
plotBands: timearea
},
yAxis: [{
min: 0,
title: {
text: '巡检值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
opposite: true,
min: 0,
title: {
text: '巡检值'
},
plotLines: [{
value: 0,
width: 1,
color: 'red'
}]
}],
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S'//鼠标移动到趋势线上时显示的日期格式
},
series: data,
//去掉highcharts.com链接
credits: {
enabled: false
}
});
}
//------------------------------------------------------------
var swhTreeObj = {
check: {
enable: false
},
async: {
enable: true,
url: "/AjaxSwitchDynamicInfo/GetSwitchSearchTree.cspx",
autoParam: ["id", "name=n"],
otherParam: { "type": "switchport" }
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback: {
onClick: onClickCheckEvent
}
};
function onClickCheckEvent(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.checkNode(treeNode, !treeNode.checked, null, true);
if (treeNode.type == "switch") {
selPortObj.queryParams.switchmac = treeNode.Mac;
} else {
selPortObj.queryParams.switchmac = '';
}
$("#selPort").combogrid(selPortObj);
return false;
}
/**
* 日期时间格式化方法，
* 可以格式化年、月、日、时、分、秒、周
**/
Date.prototype.Format = function (formatStr) {
var week = ['日', '一', '二', '三', '四', '五', '六'];
return formatStr.replace(/yyyy|YYYY/, this.getFullYear())
.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100))
.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1)).replace(/M/g, (this.getMonth() + 1))
.replace(/w|W/g, week[this.getDay()])
.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate()).replace(/d|D/g, this.getDate())
.replace(/HH|hh/g, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours()).replace(/H|h/g, this.getHours())
.replace(/mm/g, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes()).replace(/m/g, this.getMinutes())
.replace(/ss/g, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds()).replace(/S|s/g, this.getSeconds());
};