HighCharts画时间趋势图,标示区以及点击事件操作-阿里云开发者社区

开发者社区> awbeci> 正文

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

简介: 最近在用HighCharts画趋势图,如果按照设计文档上来画那太复杂了,于是根据自己多年的经验改动了设计文档,添加了highcharts的标示区,然而我也发现,最后一次画highchart趋势图还是在2年前,现在居然都不知道怎么画了(其实也不是不会画,只不过给的开发时间紧,而且我又是个急子,所以觉得...
+关注继续查看

最近在用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());
};

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HighCharts画时间趋势图,标示区以及点击事件操作
最近在用HighCharts画趋势图,如果按照设计文档上来画那太复杂了,于是根据自己多年的经验改动了设计文档,添加了highcharts的标示区,然而我也发现,最后一次画highchart趋势图还是在2年前,现在居然都不知道怎么画了(其实也不是不会画,只不过给的开发时间紧,而且我又是个急子,所以觉得...
682 0
bash 常用操作
删除不为空的文件夹 rm -rf dir_name
526 0
Hbase操作table常见方法示例
首先上我的输出类: /** * 功能:电池历史数据数据结构 * Created by liuhuichao on 2016/12/5. */ public class ResBatteryDataHistory implements Serializable { priv...
747 0
Android学习之Image操作及时间日期选择器
一、基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类。 1:        只需要记住图片在res/drawable-xxx下就行了。
807 0
[喵咪大数据]Hadoop节点添加下线和磁盘扩容操作
Hadoop绝非一个简单程序,集群模式下更是如此,所有的数据都存储在Hadoop中如果操作不当会存在丢失数据的风险,那么怎么在安全的情况,扩容下线维护或者磁盘满了怎么增加空间,就是今天的主要内容了.
236 0
Haskell函数式编程之四-List操作
List在函数式语言中是一个重要的抽象,很多事情离了它就很难做到。函数式语言的鼻祖Lisp名称就来自List processing。 Haskell本身也给List操作提供了一系列的操作符以及库函数。
758 0
+关注
awbeci
我的名字叫张威(多好听的名字啊),毕业于哈弗大学(之前和比尔&middot;盖次是同学,自从那家伙创立了威软,我和他的关系就不太好,我发誓要打败他,然后进入安徽机电职业技术学院学习软件技术,你们觉得我会成功么), 现在在一家世界五百强公司任职UFO(想问我是什么公司?叫合肥优尔电子科技有限公司
590
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载