zoukankan      html  css  js  c++  java
  • hchart

    function showModal(id) {
        $('#ChartDiv').highcharts({
            chart: {
                type: 'line',
            },
            title: {
                text: '瞬时流量曲线图'
            },
            xAxis: {
                type: 'datetime',
                minRange: 24 * 3600 * 1000,
                tickInterval: 1 * 3600 * 1000,
                dateTimeLabelFormats: {
                    day: '%H:%M:%S'
                }
            },
            yAxis: {
                title: {
                    text: 'm³'
                }
            },
            tooltip: {
                valueSuffix: ' m³',
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x:%H:%M:%S}: {point.y}'
            },
            series: [{
    
            }]
    
        });
    
        $.ajax({
            url: '/WaterFlowOverview/GetDetail',
            type: 'post',
            data: { id: id },
            datatype: 'json',
            success: function (data) {
                $("#detailContinerDiv").empty();
                $("#detailContinerDiv").html(data);
            }
    
        });
    
    
        $.ajax({
            url: '/WaterFlowOverview/GetChartData',
            type: 'post',
            data: { id: id },
            datatype: 'json',
            success: function (data) {
                var chart = $('#ChartDiv').highcharts();
    
                for (var i = 0; i < data.length; i++) {
                    var arr = GetJson(data[i].arr)
                    chart.addSeries({
                        name: data[i].date,
                        data: arr,
                        pointStart: Date.UTC(2010, 0, 1),
                        pointInterval: 1 * 3600 * 1000
                    });
                }
                chart.series[0].remove();
                $("#realTimeModal").modal("show");
            }
        });
    }
    
    function GetJson(data) {
        var json = new Array();
        for (var i = 0; i < data.length; i++) {
    
            var str = data[i].time;
            str = str.replace(/-/g, "/");
            var time = new Date(str);
            json[i] = [Date.UTC(2010, 0, 1, time.getHours(), time.getMinutes(), time.getSeconds()), data[i].data];
        }
        return json;
    }
    
    //查询事件
    function query() {
        var name = $("#txt_name").val();
        if (name == "全部") {
            name = "";
        }
        //$.ajax({
        //    url: '/HumitureMeter/GetListDataOf',
        //    type: 'post',
        //    data: { strwhere: name },
        //    success: function (data) {
        //        $("#table").empty();
        //        $("#table").html(data);
        //    }
        //});
        $.ajax({
            url: '/HumitureMeter/GetListDataGof',
            type: 'post',
            data: { strwhere: name },
            success: function (data) {
                $("#contentDiv").empty();
                $("#contentDiv").html(data);
            }
        });
    }
  • 相关阅读:
    playbook实现httpd服务安装与配置
    Ansible介绍与安装使用
    Servlet 连接mysql数据库
    day04作业
    day03python作业
    正式课第一天作业
    函数
    周作业
    数据类型
    day03作业
  • 原文地址:https://www.cnblogs.com/rage-the-dream/p/6510474.html
Copyright © 2011-2022 走看看