Javascript 将数据显示为实时流、图表

因此，我拥有的是一组存储的数据，我可以在Highchart中轻松访问这些数据。但现在我需要的是以实时流的形式显示数据 如以下示例所示：

到目前为止，我所做的是：

<script type="text/javascript">

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {


        crosshair: false
    },
    yAxis: {


        title: {
            text: 'Peaks'

        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
                duration: 5000
            }

    }]
});


</script>.

var xValues=[]；
1.3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 5,8,3,7,9,3,7]；
海图。海图（'ppg'{
图表：{
类型：“行”
},
标题：{
文本：“ECG数据”
},
副标题:{
文本：“”
},
xAxis：{
十字线：错
},
亚克斯：{
标题：{
文字：“峰值”
}
},
工具提示：{
启用：false
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名称：“”，
线宽：2，
数据：xValues，
动画：{
持续时间：5000
}
}]
});
.

我的数据如何像上面的例子那样流动？在10个补丁中。 以下是正在工作的JSFIDLE：

---

您的代码中缺少事件，该事件将触发每秒的更改

像这样的。我用了随机数

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];


Highcharts.chart('ppg', {
    chart: {
        type: 'line',
         events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = Math.random();
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {


        crosshair: false
    },
    yAxis: {

        title: {
            text: 'Peaks'
        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
                duration: 5000
            }
    }]
});

---

缺少代码事件中的工作，这将每秒触发更改

像这样的。我用了随机数

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];


Highcharts.chart('ppg', {
    chart: {
        type: 'line',
         events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = Math.random();
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {


        crosshair: false
    },
    yAxis: {

        title: {
            text: 'Peaks'
        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
                duration: 5000
            }
    }]
});

---

工作

您最初只能添加前10个点，然后使用图表

加载

事件函数并设置间隔以使用

shift

参数添加剩余点：

var xValues = [],
    counter = 11,
    startValues;

xValues = [...];

startValues = xValues.slice(0, counter);

var chart = Highcharts.chart('ppg', {
    chart: {
        type: 'line',
        events: {
            load: function() {
                var chart = this,
                    interval = setInterval(function() {
                        chart.series[0].addPoint(xValues[counter], true, true);
                        counter++;

                        if (counter === xValues.length - 1) {
                            clearInterval(interval);
                        }
                    }, 1000);
            }
        }
    },
    ...
});

---

现场演示：

API参考：

---

您最初只能添加前10个点，然后使用图表

加载

事件函数并设置间隔，使用

shift

参数添加剩余点：

var xValues = [],
    counter = 11,
    startValues;

xValues = [...];

startValues = xValues.slice(0, counter);

var chart = Highcharts.chart('ppg', {
    chart: {
        type: 'line',
        events: {
            load: function() {
                var chart = this,
                    interval = setInterval(function() {
                        chart.series[0].addPoint(xValues[counter], true, true);
                        counter++;

                        if (counter === xValues.length - 1) {
                            clearInterval(interval);
                        }
                    }, 1000);
            }
        }
    },
    ...
});

---

现场演示：

API参考：

---

他们的例子是使用循环中的动态

数据

，如果您有动态

数据

，并且希望在图表中实时更新，您需要通过收听

web套接字

或类似技术来触发更改，该技术根据服务器不断更新

数据

@cŝdk我的数据已经定义了100个点，我只想显示在10个点窗口中移动的数据他们的示例是使用动态

数据

，在循环中生成，如果您有一个动态

数据

，并且希望在图表中实时更新它，您需要通过收听

web套接字

或类似的技术来触发更改，该技术根据服务器不断更新

数据

@cŝdk我的数据已经定义了100个点我只想显示在10个点窗口中移动的数据小提琴非常混乱我只想数据从0流到100，但不是立刻这应该像我给出的示例代码fiddle非常混乱，我只希望数据从0流到100，但不是立即流。它应该像我给出的示例代码一样