Highcharts 不在 setInterval 上绘制点

Question

我在后端每 30 秒将数据放在一个 api 上。在前端，我使用 highcharts 来可视化数据，并使用 setInterval 设置每 30 秒检索一次新数据。我的问题是，在那个 setInterval 上，折线图消失或没有绘制到下一个新点。有人现在为什么会这样吗？

小提琴：http://jsfiddle.net/b8tf281n/3/

代码：

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: []
            }]


        };

    });
});

Answer 1

您的 test.y 是问题所在。它在一个时间间隔后返回 undefined。不知何故 BPM 正在改变它的结构 - 将每个对象从 {x,y} 更改为 [0,1] - 因此我使用了：

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

获取以前的结构或新的结构。我还将间隔设置为 3 秒，以便您更轻松地看到差异。这是DEMO。