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>