使用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]
           // }],
 
        });
    }
原文地址:https://www.cnblogs.com/zhangyuG/p/13343554.html