动态显示实时高图表数据，无需警报

Displaying live highcharts data dynamically without alert

本文关键字：实时 高图表 数据 动态显示      更新时间：2023-09-26

下面是我的代码，首先我使用JSON从数据库中获取数据，之后我将最初的15行绑定到图表中，并且在setInterval函数中，我在1秒的间隔后连续绑定1行，我的问题没有警报即alert（"hi"）我没有得到初始结果，如何在没有警报的情况下获得结果？

$(function () {
      $(document).ready(function () {
                var Data = "";
                var dataarray = [];
                var IdArray = [];
                var counter = 0;
                var chart;
                $('#container').highcharts({
                    chart: {
                        type: 'spline',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,
                        events: {
                            load: function () {
                                var series = this.series[0];
                                setInterval(function () {
                                    var i = 16 + counter;
                                    var x = IdArray[i], // current time
                                     y = dataarray[i];
                                    series.addPoint([x, y], true, true);
                                    counter = counter + 1;
                                }, 1000);
                            }
                        }
                    },
                    title: {`enter code here`
                        text: 'Live HighChart From Database'
                    },
                    xAxis: {
                        type: 'decimal'
                    },
                    yAxis: {
                        title: {
                            text: 'Value'
                        }
                    },
                    series: [{
                        name: 'Data from database',
                        data: (function () {
                            // generate an array of random data
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json',
                                url: 'LiveHighchart.aspx/GetData',  
                                data: '{}',
                                success:
                    function (response) {
                        Data = response.d;
                        for (var i = 0; i < Data.length; i++) {
                            dataarray[i] = Data[i].random;
                            IdArray[i] = Data[i].Id;
                        }
                    }
                            });
                            var data = [];
                            alert("hi");
                            for (var i = 0; i < 15; i++) {
                                data.push({
                                    x: IdArray[i],
                                    y: dataarray[i]
                                });
                            }
                            return data;
                        })()
                    }]
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
        </div>
    </div>
    </form>
</body>
</html>
我认为

这是因为查询尚未返回结果 - 警报导致您的应用程序暂停，这意味着结果可以及时交付。您应该考虑使用回调 - 仅在返回 AJAX 调用中的数据时运行的函数。

我自己解决了，在ajax请求加载数据之前执行ajax请求后的代码：AJAX 中的这一行（异步：假）请求强制 AJAX 之后的代码暂停，直到 AJAX 加载数据

相关文章：