Javascript Highcharts未在设置间隔上绘制点

我在后端每隔30秒将数据放在api上。在前端，我使用highcharts可视化数据，并使用setInterval设置每隔30秒检索一次新数据。我的问题是，在该设置间隔上，线图消失或不绘制到下一个新点。有人知道这是为什么吗

小提琴：

代码：

chart1 = {
    yAxisMin: 40,
    yAxisMax: 100
};
// empty objects for our data and to create chart
seriesData = [];
BPM = [];
time1 = [];

// console.log(chart1.data.series);

$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });



        var url = 'http://msbandhealth.azurewebsites.net/odata/PulsesAPI/';
        $.ajax({
            url: url,
            dataType: 'json',
            context: seriesData,
            success: function (data) {



                // structure our data 
                for (var i = 0; i < data.value.length; i++) {
                    bpm = data.value[i].BPM;
                    time = data.value[i].Time;
                    BPM.push({
                        x: moment(time),
                        y: bpm
                    });
                    // console.log(BPM);
                    time1.push(time);
                }
                console.log((new Date).getTime());
                console.log(moment(time, "DD.MM.YYYY hh:mm:ss"));
                console.log(BPM);
                console.log(BPM[BPM.length - 1]);
                // console.log(seriesData);

                // set our data series and create new chart
                chart1.data.series[0].data = BPM;

                chart = new Highcharts.Chart(chart1.data);
                $('#container').css({
                    height: '400px'
                });


                // console.log(sortedBPM);


                // console.log(time1);

            }

        });




        // give highcharts something to render to
        var container = document.getElementById("container");

        chart1.data = {

            chart: {
                renderTo: container,
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {
                        setInterval(function () {

                            // find last data points
                            var test = BPM[BPM.length - 1];
                            var x = (new Date).getTime(),
                                y = test.y;
                            console.log(x);

                            shift = chart.series[0].data.length < 30;
                            chart.series[0].addPoint([x, y], true, true);




                        },
                        30000);
                    }
                }

            },
            title: {
                text: 'Microsoft Band: Real Time Pulse Analysis'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                dateTimeLabelFormats: {


                },
            },
            yAxis: {
                min: chart1.yAxisMin,
                max: chart1.yAxisMax,
                title: {
                    text: 'Heart Rate'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Beats Per Minute',
                data: []
            }]


        };

    });
});

你的测试。y是问题所在。它在一个间隔后返回undefined。不知何故，BPM的结构正在发生变化——将每个对象从{x，y}更改为[0,1]——因此我使用：

 y = (test.y !== undefined)? test.y : test[1];

---

获取以前的结构或新结构。我还将间隔设置为3秒，以便您更容易看到差异。以下是.

我也尝试过将间隔时间改为30秒以上，但结果都是一样的。他们的api上到处都是，特别是addPoint部分。不过谢谢。hmmmm创建一个新函数，在setInterval上暂停/停止动画，直到准备好下一步。如果test.y=0，该怎么办？我认为您应该检查test.y是否未定义。@RaeenHashemi您的回答让我意识到了一些事情……我非常确定BPM在加载时只在ajax调用中更新一次。在这之后，它没有更新，这可能就是为什么它返回时没有定义，或者在我引用区域中的最后一个索引时具有相同的点。你的演示看起来很棒。问题是，如果发送数据的设备处于打开状态，api只会每30秒更新一次。此时设备未打开，演示仍在更新。你听懂了吗？所以我想知道是否应该在set interval函数中再调用一个ajax？这会杀死浏览器吗？谢谢是的，自从ajax调用以来BPM只更新了一次，但是addPoint函数在每个时间间隔内都会更新BPM，我不知道是什么原因。关于30秒的部分，我实际上没有听进去，但是每30秒调用一次ajax也没那么糟糕。