如何在ajax中传递多个数组的数据

如果您需要实时数据更新，那么我建议使用SignalR库。如官方页面所述:

SignalR允许服务器和客户端之间的双向通信。服务器现在可以立即将内容推送到连接的客户端可用

您只需等待数据库更改通知并将更新的数据推送回客户端并更新highcharts。

教程# 1

教程# 2

你可以这样做:

    var myArrayX_kwh = [];
    var myArrayY_kwh = [];
    var myArrayY_power = [];
    var myArrayY_voltage_1 = [];
    var myArrayY_voltage_2 = [];
    var myArrayY_voltage_3 = [];
    var myArrayY_current_1 = [];
    var myArrayY_current_2 = [];
    var myArrayY_current_3 = [];
    var arry_kwh = [];
    var arry_power = [];
    var arry_voltage_1 = [];
    var arry_voltage_2 = [];
    var arry_voltage_3 = [];
    var arry_current_1 = [];
    var arry_current_2 = [];
    var arry_current_3 = [];

@foreach (var st in ViewData["Meter_datetime"] as List<double?>)
    {
    @:myArrayX_kwh.push(@st);
}
@foreach (var st in ViewData["energy_kwh"] as List<double?>)
{
    @:myArrayY_kwh.push(@st);
}
@foreach (var st in ViewData["power_kw"] as List<double?>)
{
    @:myArrayY_power.push(@st);
}
@foreach (var st in ViewData["voltage_1"] as List<double?>)
{
    @:myArrayY_voltage_1.push(@st);
}
@foreach (var st in ViewData["voltage_2"] as List<double?>)
{
    @:myArrayY_voltage_2.push(@st);
}
@foreach (var st in ViewData["voltage_3"] as List<double?>)
{
    @:myArrayY_voltage_3.push(@st);
}
@foreach (var st in ViewData["current_1"] as List<double?>)
{
    @:myArrayY_current_1.push(@st);
}
@foreach (var st in ViewData["current_2"] as List<double?>)
{
    @:myArrayY_current_2.push(@st);
} @foreach (var st in ViewData["current_3"] as List<double?>)
 {
  @:myArrayY_current_3.push(@st);
}

for (var i = 0; i < myArrayX_kwh.length; i++) {
    arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
    arry_power.push({ x: myArrayX_kwh[i], y: myArrayY_power[i], });
    arry_voltage_1.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_1[i], });
    arry_voltage_2.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_2[i], });
    arry_voltage_3.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_3[i], });
    arry_current_1.push({ x: myArrayX_kwh[i], y: myArrayY_current_1[i], });
    arry_current_2.push({ x: myArrayX_kwh[i], y: myArrayY_current_2[i], });
    arry_current_3.push({ x: myArrayX_kwh[i], y: myArrayY_current_3[i], });
}

}

在一段时间后更新图表，你可以使用以下代码:

var interval = window.setInterval(ajaxMethodCall, 20000);

上面的代码每隔20秒调用一次ajax。

使用轮询:

$(document).ready(function poll() {
        setTimeout(function() {
            $.ajax({
                url : "/Test/TestServlet",
                type : "GET",
                //dataType : "json",
                //data : dataArray,
                success : function(data) {
                    alert("success")
                    dt.setValue(data.value);
            var chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container2',
                zoomType: 'xy',
                resetZoomButton: {
                    position: {
                        align: 'right', // by default
                        verticalAlign: 'top', // by default
                        x: -250,
                        y: 5,
                        //height: 25
                    },
                    relativeTo: 'chart'
                }
            },
            title: {
                text: 'Power vs Date & Time',
                style: {
                    //color: '#FF00FF',
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Power (KW)'
                }
            },
            plotOptions: {  
                series: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 3
                    }
                }
            },
            series: [{
                    name : 'Power kW',
                    data: arry_power,
            }],
        });
                },
                error : function(data) {
                    console.log("error polling");
                },
                complete : poll,
            })
        }, 5000);
    });

这是一个图表

 var chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container2',
                zoomType: 'xy',
                resetZoomButton: {
                    position: {
                        align: 'right', // by default
                        verticalAlign: 'top', // by default
                        x: -250,
                        y: 5,
                        //height: 25
                    },
                    relativeTo: 'chart'
                }
            },
            title: {
                text: 'Power vs Date & Time',
                style: {
                    //color: '#FF00FF',
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Power (KW)'
                }
            },
            plotOptions: {  
                series: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 3
                    }
                }
            },
            series: [{
                    name : 'Power kW',
                    data: arry_power,
            }],
        });