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 是问题所在。它在一个间隔后返回未定义。某种方式 BPM 正在改变它的结构 - 将每个对象从{x，y}更改为[0,1] - 因此我使用了：

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

要么获得以前的结构，要么获得新结构。我还将间隔设置为3秒，以便您更容易看到差异。这是DEMO。

Highcharts不在setInterval上绘制点

1 个答案: