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);
        }
    });
}
原文地址:https://www.cnblogs.com/rage-the-dream/p/6510474.html