zoukankan      html  css  js  c++  java
  • 使用highcharts图表,获取历史数据并生成折线图

      highcharts 中文官方网站 https://www.highcharts.com.cn/demo/highcharts/line-basic
    //获取历史数据
        function getHisData(sn) {
            var temsLs = []; //历史空气温度
            var humsLs = []; //历史空气湿度
            var Number = []; //历史数量
            var temstime = [];
            var humstime = [];
            var Numbertime = [];
            var Numbers = 0;//诱捕虫子七天累计数量
            var starttim = getDay(-7);
            var endtim = getDay(0);
            var starttime = starttim + " 00:00:00";
            var endtime = endtim + " 23:59:59";
            if (!!sn) {
                $.ajax({
                    url: hisdataurl,
                    data: { SN: sn, startTime: starttime, endTime: endtime },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        var datas = data.datalist[0];
                        var dims = datas.sensorfield;
                        var values = datas.valuelist;
                        for (var i = 0; i < dims.length; i++) {
                            for (var j = 0; j < values.length; j++) {
                                var value = values[j].fieldvalue[i];
                                var stime = values[j].time;
                                var time = stime.substring(0, stime.lastIndexOf(":"));
                                //var isaddtolist = 1;
                                if (dims[i] == "温度") {
                                    if (value == -1000) {
                                        value = "";
                                    }
                                    temsLs.push(value);
                                    temstime.push(time);
                                } else if (dims[i] == "湿度")
                                {
                                    if (value == -1000) {
                                        value = "";
                                    }
                                    humsLs.push(value);
                                    humstime.push(time);
                                } else if (dims[i] == "数量")
                                {
                                    if (value == -1000) {
                                        value = 0;
                                    }
                                    Number.push(value);
                                    Numbertime.push(time);
                                    Numbers += value;
                                }
                            }
                        }
                        setChart(temsLs, temstime, humsLs, humstime, Number, Numbertime, sn);
                        ////判断数据是否有值,-1000代表当前数据无值
                        //if (Numbers == -1000) {
                        //    Numbers = 0;
                        //}
                        $("#" + sn + "").text(Numbers + "个");
                    },
                })
            }
            //return Numbers;
        }
     
    //主要是将获取到的历史数据存入到数组中,调用方法是将数组传递下去,动态生成的数据从数组中取,上面就是我自己获取历史数据的方法(可不参考)
     
        //折线统计图
        function setChart(temsLs, temstime, humsLs, humstime, Number, Numbertime,sn) {
            var values;
            var times;
            var titletext = "";
            var unit = "";
            //$("#" + type).addClass("active");
            $('#' + sn +"Zhexian"+'').highcharts({
                chart: {
                    type: 'spline'
                },
                //title: {
                //    text: "七天温度,湿度,诱捕数量曲线图",
                //    style: {
                //        "fontSize": "14px",   //字体大小
                //    },
                //    verticalAlign: 'bottom',
                //    //align: 'left'
                //},
                title: {
                    text: ""
                   },
                length: {
                    align: 'left',
                    verticalAlign: 'top',
                    //y:20,
                    floating: true,
                    borderWidth:0
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                //subtitle: {
                //    text: '来源:北京农科院',
                //    x: -20
                //},
                xAxis: {
                    categories: humstime || [],
                    tickInertval: times ? (times.length - 1) : 0
                },
                yAxis: [{
                    title: {
                        text: unit
                    }
                }],
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    series: {
                        connectNulls: true //连接数据为null的前后点
                    }
                },
       //绑定数据
                series: [{
                    name: "温度",
                    data: temsLs
                     },
                    {
                        name: "湿度",
                        data: humsLs
                    },
                    {
                        name: "诱捕数量",
                        data: Number
                    } ]
     
         // [{
               // name: '安装,实施人员',
          // data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
          // }, {
          // name: '工人',
          // data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
               // }],
     
            });
        }
  • 相关阅读:
    高度百分比生效的方法height:100%
    您可以尝试改变浏览器大小,这个元素依然是水平垂直居中的哦!
    百分比
    百分比布局
    mysql 用户管理
    lnmp安装--linux通过tar.gz源码包安装mysql
    linux内核编译,内核参数修改
    CentOS安装mplayer
    x86与x64与x86_64
    centos 关闭触摸板,触摸板点击
  • 原文地址:https://www.cnblogs.com/zhangyuG/p/13343554.html
Copyright © 2011-2022 走看看