HighCharts画时间趋势图,标示区以及点击事件操作
最近在用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()); };