highcharts折线图使用

var url=\'<c:url value=\'/deviceActChart\' />\';
                $.get(url,{
                            devId:row.devId,
                            beginDate:beginStr,
                            endDate:endStr,
                            field:field
                        },
                        function(data){
                            console.log(data);
                            timeArr=data.time;
                            var max=timeArr.length-1;
                            var isScroll=false;
                            if(max>20){
                                isScroll=true;
                                max=20;
                            }
                            //根据field判断需要生成的折线图
                                if(field=="mainFanStatus"){
                                charData=data.mainfandata;
                                fieldName="主风机状态";
                            }else if(field=="outdoorFanStatus"){
                                charData=data.outdoorfandata;
                                fieldName="外风机状态";
                            }else if(field=="ac1Status"){
                                charData=data.ac1data;
                                fieldName="空调一状态";
                            }else if(field=="ac2Status"){
                                charData=data.ac2data;
                                fieldName="空调二状态";
                            }else if(field=="ac3Status"){
                                charData=data.ac3data;
                                fieldName="空调三状态";
                            }else{
                                return;
                            }        
                            //console.log(data.time);
                            
                            chart=Highcharts.chart(\'container\', {
                                title: {
                                    text: row.devName+fieldName+\'折线图\'
                                },
                                legend:{
　　　　　　　　　　　　　　　　　　　　　//图例
                                    enabled:false
                                },
                                credits:{
                                    //版权信息
                                    enabled:false
                                },
                                exporting:{
                                    enabled:false//导出模块
                                },
                                /*  plotOptions:{
                                    series:{
                                        color:\'blue\'
                                    }
                                },   */
                                tooltip:{
                                    formatter:function(){
                                        return "时间："+formatDate(this.x)+"<br/>"+
                                                "状态："+formatActStatus(this.y);
                                    }
                                },
                                xAxis: {
                                    categories: timeArr,//坐标轴的分类
                                    type: \'datetime\',
                                    labels: {
                                        formatter:function(){
                                          //var xdate=new Date(this.value);
                                          return formatDate(new Date(this.value)).substring(2,16);
                                        }
                                      },
                                      min:0,
                                      max:max//设置坐标最大值
                                },
                                scrollbar:{
                                    enabled:isScroll,//通过定义变量动态控制是否产生滚动条
                                    showFull:false
                                },
                                yAxis:{
                                     categories: [0,1],
                                     labels: {
                                            formatter:function(){
                                              if(this.value ==1) { 
                                                return "开机";
                                              }else if(this.value ==0) { 
                                                return "关机"; 
                                              }
                                            }
                                          },
                                   title:{
                                       text:\'设备动作\'
                                   }
                                },
                                series: [{
                                    data: charData,
                                     color: \'blue\', 
                                    threshold:0.01,//设置阀值
                                    negativeColor: \'red\' 
                                }]
                            },function(c){
                                if(isScroll){
　　　　　　　　　　　　　　　　　　　　　//将产生的滚动条滚动到最右边显示　　　　　　　　
                                    c.xAxis[0].setExtremes(charData.length-20,charData.length-1);
                                }
                            });
                        $("#reportDialog").dialog("open").dialog("setTitle", "设备状态折线图");
                        },"json");

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设备报警状态变化报表</title>
<sec:authentication property="principal" var="currentUser" />
<%@ include file="/WEB-INF/views/shared/script.jsp"%>
<script>
    var beginStr;
    var endStr;
    var charData;
    var timeArr;
    var fieldName;
    var chart=null;
    $(function(){
        $("#begindate").datetimebox(\'setValue\',formatDate(subOneDay(new Date())));
        $("#enddate").datetimebox(\'setValue\',formatDate(new Date()));
        checkDate();
        $("#oname").combotree({
            url:"<c:url value=\'/orgs.json/\' />",
            width:170,
            method:\'get\',
            onClick:function(node){
                $("#oid").val(node.attributes.orgId);
                searchDevice();
            },
            onLoadSuccess:function(row,data){
                var root=$("#oname").combotree(\'tree\').tree(\'getRoot\');
                 $("#oname").combotree(\'tree\').tree("expand",root.target);
            }
        });
        $("#oname").combotree(\'setValue\',\'${currentUser.orgName}\');
        
        $("#dg").datagrid({
            fit:true,
            fitColumns:false,
            pageSize:20,
            border:false,
            rownumbers:true,
            pagination:true,
            singleSelect:false,
            url:\'<c:url value=\'/alarmStatus.json\' />\',
            method:\'get\',
            queryParams:{
                    orgId:$(\'#oid\').val(),
                    beginDate:beginStr,
                    endDate:endStr,
                    containSub:$(\'#containSub\').is(\':checked\')
            },
            toolbar:\'#tbDevice\',
            columns:[[
                      {field:\'cku\',checkbox:true},
                      {field:\'orgId\',title:\'机构id\',align:\'center\',hidden:true},
                      {field:\'orgName\',title:\'机构\',align:\'center\',width:90},
                      {field:\'devName\',title:\'设备名称\',align:\'center\',width:130},
                      {field:\'macAddr\',title:\'硬件地址\',align:\'center\',width:110},
                      {field:\'geoAddr\',title:\'机房地址\',align:\'center\',width:150},
                      {field:\'outdoorTempSensorAlert\',title:\'室外温感报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:90,formatter:formatterAct},
                      {field:\'indoorTempSensorAlert\',title:\'室内温感报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:90,formatter:formatterAct},
                      {field:\'fanAlarmAlert\',title:\'风机故障报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:100,formatter:formatterAct},
                      {field:\'highTempAlarmAlert\',title:\'高温报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:100,formatter:formatterAct},
                      {field:\'lowTempAlarmAlert\',title:\'低温报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:100,formatter:formatterAct},
                      {field:\'voltageAlarmAlert\',title:\'电压过高/过低报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:150,formatter:formatterAct},
                      {field:\'ac1DownAlert\',title:\'空调一失效报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:150,formatter:formatterAct},
                      {field:\'ac2DownAlert\',title:\'空调二失效报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:150,formatter:formatterAct},
                      {field:\'ac3DownAlert\',title:\'空调三失效报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:150,formatter:formatterAct},
                      {field:\'smokeSensorAlert\',title:\'烟雾报警\',align:\'center\',styler:function(){return \'background-color:#EEE8AA;color:black;\';},width:150,formatter:formatterAct},
                      {field:\'devId\',title:\'id\',hidden:true}
                      ]],
            onDblClickCell:function(rowIndex,field,value){
                //alert("rowIndex="+rowIndex+"<br/>"+"field="+field+"<br/>"+"value="+value+"<br/>");
                //根据行索引查出设备id
                var rows = $(\'#dg\').datagrid(\'getRows\');//获得所有行
                    var row = rows[rowIndex];//根据index获得其中一行。
                
                var url=\'<c:url value=\'/alarmStatusChart\' />\';
                $.get(url,{
                            devId:row.devId,
                            beginDate:beginStr,
                            endDate:endStr,
                            field:field
                        },
                        function(data){
                            timeArr=data.time;
                            var max=timeArr.length-1;
                            var isScroll=false;
                            if(max>20){
                                isScroll=true;
                                max=20;
                            }
                            //根据field判断需要生成的折线图
                                if(field=="outdoorTempSensorAlert"){
                                charData=data.outdoor;
                                fieldName="室外温感报警";
                            }else if(field=="indoorTempSensorAlert"){
                                charData=data.indoor;
                                fieldName="室内温感报警";
                            }else if(field=="fanAlarmAlert"){
                                charData=data.fan;
                                fieldName="风机报警";
                            }else if(field=="highTempAlarmAlert"){
                                charData=data.hightemp;
                                fieldName="高温报警";
                            }else if(field=="lowTempAlarmAlert"){
                                charData=data.lowtemp;
                                fieldName="低温报警";
                            }else if(field=="voltageAlarmAlert"){
                                charData=data.vol;
                                fieldName="电压过高过低报警";
                            }else if(field=="ac1DownAlert"){
                                charData=data.ac1data;
                                fieldName="空调一报警";
                            }else if(field=="ac2DownAlert"){
                                charData=data.ac2data;
                                fieldName="空调二报警";
                            }else if(field=="ac3DownAlert"){
                                charData=data.ac3data;
                                fieldName="空调三报警";
                            }else if(field=="smokeSensorAlert"){
                                charData=data.smoke;
                                fieldName="烟雾报警";
                            }else{
                                return;
                            }        
                            
                            chart=Highcharts.chart(\'container\', {
                                title: {
                                    text: row.devName+fieldName+\'状态折线图\'
                                },
                                legend:{
                                    enabled:false
                                },
                                credits:{
                                    enabled:false
                                },
                                exporting:{
                                    enabled:false
                                },
                                tooltip:{
                                    formatter:function(){
                                        return "时间："+formatDate(this.x)+"<br/>"+
                                                "状态："+formatAlarmStatus(this.y);
                                    }
                                },
                                plotOptions:{
                                    series:{
                                        event:{
                                            afterAnimate: function () {
                                                this.chart.renderer.label(this.name + \' has appeared\', 100, 70)
                                                    .attr({
                                                        padding: 10,
                                                        fill: Highcharts.getOptions().colors[0]
                                                    })
                                                    .css({
                                                        color: \'white\'
                                                    })
                                                    .add();
                                            }
                                        }
                                    }
                                },
                                xAxis: {
                                    /* tickInterval:5, */
                                    
                                    categories: timeArr,
                                    labels: {
                                        formatter:function(){
                                          /* var xdate=new Date(this.value);
                                          console.log(this.value); */
                                          //var a=formatDate(new Date(this.value)).substring(2);
                                          return formatDate(new Date(this.value)).substring(2,16);
                                        }
                                      },
                                      min:0,
                                      max:max
                                },
                                scrollbar:{
                                    enabled:isScroll
                                },
                                yAxis:{
                                     categories: [0,1],
                                     labels: {
                                            formatter:function(){
                                                if(this.value ==1) { 
                                                    return "报警";
                                                  }else if(this.value ==0) { 
                                                    return "正常"; 
                                                  }
                                            }
                                          },
                                      title:{
                                          text:\'报警状态\'
                                      }
                                },
                                series: [{
                                    data: charData,
                                    color: \'red\',
                                    threshold:0.99,//设置阀值
                                    negativeColor: \'#0088FF\',
                                }]
                            },function(c){
                                if(isScroll){
　　　　　　　　　　　　　　　　　　　　　　//设置滚动条居右显示
                                    c.xAxis[0].setExtremes(charData.length-20,charData.length-1);
                                }
                            });
                            
                        $("#reportDialog").dialog("open").dialog("setTitle", "报警状态折线图");
                        },"json");
            }
        });
        $("#reportDialog").dialog({
　　　　　　　//图表尺寸改变时，重新绘画折线图
            onResize:function(){
                if(chart!=null){
                    chart.reflow();
                }
            }
        });
    });
    
    function formatterAct(val){
        return val+"次";
    }
    
    function formatAlarmStatus(value){
        if(value ==1) { 
            return \'<font color="red">报警</font>\';
        }
        return "正常";
    }
    
    function searchDevice()
    {
        //checkDate();
        if(!checkDate()){
            return;
        }
        $("#dg").datagrid(\'load\',
        {
            orgId:$(\'#oid\').val(),
            beginDate:beginStr,
            endDate:endStr,
            containSub:$(\'#containSub\').is(\':checked\')
        });
    }
    function checkDate(){
        var regexp = /^[1-9]{4}-[0-9]{2}-[0-9]{2} [0-2]{1}[0-4]{1}:[0-5]{1}[0-9]{1}:[0-5]{1}[0-9]{1}$/g;//yyyy-MM-dd HH:mm:ss 
        
        beginStr = $(\'#begindate\').datetimebox(\'getValue\'); 
        endStr = $(\'#enddate\').datetimebox(\'getValue\'); 
        
        /* if(!regexp.test(beginStr)||!regexp.test(endStr)){
            $.messager.alert("警告","请输入正确的时间格式！","warning");
            return false;
        } */ 
        
        var begindate=new Date(Date.parse(beginStr.replace(/-/g,\'/\')));
        if(endStr==\'\' || endStr==null){
            var enddate=new Date();
        }else{
            var enddate=new Date(Date.parse(endStr.replace(/-/g,\'/\')));
        }
        
        if(begindate>enddate){
            $.messager.alert("警告","结束时间不能小于开始时间！","warning");
            return false;
        }
        return true;
    }
    
    function subOneDay(val){
        val.setDate(val.getDate()-1);
        val.setHours(0);
        val.setMinutes(0);
        val.setSeconds(0);
        return val;
    }
   
</script>

</head>
<body class="easyui-layout">
    <div data-options="border:false,region:\'north\',collapsible:true,title:\'查询条件\',iconCls:\'icon-form-edit\'" style="border: 1px solid #95B8E7; background: #F4F4F4; border-left: none; border-right: none; border-top: none; height: 80px;">
        <div style="padding: 10px; background: #F4F4F4;">
               <label>起始时间：</label><input id="begindate" class="easyui-datetimebox" editable="false">
               <label>结束时间：</label><input id="enddate" class="easyui-datetimebox" editable="false">
               <label>机构：</label>
               <input id="oname" class="easyui-combotree expandCombotree" style="width:100px;"/>
            <input id="oid" type="hidden" value="${currentUser.orgId }"/>
               <label style="white-space: nowrap;"><input type="checkbox" id="containSub" name="containSub" checked="checked"/>包含子机构</label>
               <a id="searchDev" onclick="javascript:searchDevice();" class="easyui-linkbutton" iconCls="icon-search" style="white-space: nowrap;">查询</a>
        </div>
     </div>
     
     
     <div data-options="border:false,region:\'center\',title:\'报警统计(双击淡菊色区域单元格会弹出相应状态折线图)\',collapsible:true,iconCls:\'icon-list\'" style="border: 1px solid #95B8E7; background: #F4F4F4; border-left: none; border-right: none; border-top: none;">
        <table id="dg"></table>
    </div>
    <div id="reportDialog" class="easyui-dialog" title="sdsa" closed=true resizable="true" style="width:60%;height:450px;">
        <div>
            <div id="container" style="height: 90%; margin: 0 auto; width: 100%"></div>
        </div>
    </div>
</body>
</html>