Question

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

$(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>

Answer 1

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

Answer 2

我自己解决了，在ajax请求加载数据之前执行ajax请求之后的代码：此行（async：false）在ajax请求强制代码之后，ajax暂停直到ajax加载数据

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

2 个答案: