Question

来自传感器的数据是使用Highcharts实时绘制的。传感器的样品频率为50Hz。并且要求：20ms显示数据，曲线左移，无显示暂停。唯一的方法是使用“addpoint（）”函数，但是当间隔为20ms时，显示曲线会被卡住。

events: {
            load: function () {

                // set up the updating of the chart each 20 millionsecond
                var series = this.series[0];
                setInterval(function () {
                    var x = date, // date time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 20);

问题是Highchart能否以如此高的频率显示数据？此外，boot.js模块可以改善性能吗？

Answer 1

以下是每20毫秒添加点数的示例

// Create chart
var chart = Highcharts.chart('container', {
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }],
  plotOptions: {
    line: {
      animation: false
    }
  }
})

// Add points every 20ms
var i = 0;
setInterval(function() {
  chart.series[0].addPoint(50 * (i % 3), false, false, false);
  i += 1;
}, 20)

// Redraw in 60Hz frequency
setInterval(function() {
  chart.redraw(false)
}, 1000 / 60)

// Clear data
setInterval(function() {
    if(chart.series[0].data.length > 1000) {
    chart.series[0].setData([])
  }
  chart.redraw(false)
}, 1000)

实例： http://jsfiddle.net/ak3otr5e/

添加间隔为20ms的点是可能的吗？

1 个答案: