Question

我想在图表上显示数据，我正在使用dotnet highcharts 现在，我可以使用JavaScript将数据从控制器传递到视图并且数据正在相应地显示，但是当我插入数据或更新数据库时，我总是要刷新页面，但是我想在运行时更新数据库时显示数据。

我经历过很多搜索，我发现使用ajax我可以执行某项任务

我找到了这条ajax

   $.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: 'json',
success: function(data){
    options.series[0].setData(data);
}

我有一个问题我有多个具有不同名称的数组，如下所示

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], });
    }

如何在ajax数据字段中传递它们？任何帮助将不胜感激

Answer 1

您可以这样做：

    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,
            }],

        });

Answer 2

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

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

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

Tutorial #1

Tutorial #2

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

2 个答案: