HighCharts画时间趋势图，标示区以及点击事件操作

最近在用HighCharts画趋势图，如果按照设计文档上来画那太复杂了，于是根据自己多年的经验改动了设计文档，添加了highcharts的标示区，然而我也发现，最后一次画highchart趋势图还是在2年前，现在居然都不知道怎么画了(其实也不是不会画，只不过给的开发时间紧，而且我又是个急子，所以觉得加速完成，然而越急就越画不好，这点我离葛经理还差很远，所以要加强这方面的培训)，熟悉之后才慢慢从它的API中解脱出来，下面贴代码吧：

$(function () {
    $.fn.zTree.init($("#search_tree"), swhTreeObj);
    initTable();
    initDate();
    $(".td-title").hide();
    $("#dlg").dialog({
         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: '项目名称',  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: '端口名称',  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,
                 1,
                color: '#808080'
            }]
        }, {
            opposite: true,
            min: 0,
            title: {
                text: '巡检值'
            },
            plotLines: [{
                value: 0,
                 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());
};