Javascript 如何通过socket.io和幻灯片视图作为滑动窗口动态更新图表？

有人能帮我找出我在图表中只显示最后X个样本时遗漏了什么吗

查看示例和线程，我正在开发一个简单的页面，该页面通过socket.io从服务器接收样本，并绘制最后10个样本。 然而，它不起作用，我正在努力找出我遗漏了什么

server.js是一个简单的示例生成器：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
    res.sendfile('index.html');
});

// On connection event.
io.on('connection', function (socket) {
    console.log('a user connected');

    socket.on('disconnect', function () {
        console.log('user disconnected');
        // TODO (How-to) release connection (?)
    });

    var max = 100;  // Scale samples from 0 to 100.

    // Generate random samples.
    setInterval(function () {
        var x = (new Date()).getTime(), // current time
            y = Math.floor((Math.random() * max) + 1);
        socket.emit('chart_data', {
            x: x,
            y: y
        });
        console.info("emitted: [" + x + "," + y + "]");
    }, 2000); //update every sec.
});

http.listen(3000, function () {
    console.log('listening on *:3000');
});

html文件包括处理绘图的脚本：

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

      // Instantiate the chart object which plots the samples.
      var graph = new Highcharts.chart('graph_container', {
          chart: {
              type: 'spline',
              animation: Highcharts.svg, // don't animate in old IE
              marginRight: 10,
              events: {
                  load: function () {
                      // set up the updating of the chart on each sample
                      var series = this.series[0];
                      socket.on('chart_data', function (sample) {
                          //add chart data to series
                          series.addPoint([sample.x, sample.y], true, false);
                      });
                  }
              }
          },
          title: {
              text: 'Live random data'
          },
          xAxis: {
              type: 'datetime',
              tickPixelInterval: 150
          },
          yAxis: {
              title: {
                  text: 'Value'
              },
              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: 'Random data',
              data: (function () {
                  // generate an array of random data
                  var data = [],
                      time = 0,
                      i;

                  socket.on('chart_data', function (sample) {
                      //add chart data to series
                      time = sample.x;
                      for (i = -19; i <= 0; i += 2) {
                          data.push({
                              x: time + i
                          });
                      }
                  });
                  return data;
              }())
          }]
      });

    });

$（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
//实例化绘制样本的图表对象。
var graph=新的Highcharts.chart（'graph\u container'{
图表：{
类型：“样条线”，
动画：Highcharts.svg，//不要在旧IE中设置动画
marginRight:10，
活动：{
加载：函数（）{
//设置每个样本的图表更新
var系列=本系列[0]；
socket.on（'chart_data'，函数（示例）{
//将图表数据添加到序列中
series.addPoint（[sample.x，sample.y]，真，假）；
});
}
}
},
标题：{
文本：“实时随机数据”
},
xAxis：{
键入：“日期时间”，
像素间隔：150
},
亚克斯：{
标题：{
文本：“值”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（'%H:%M:%S'，this.x）+'
'+
数字格式（this.y，2）；
}
},
图例：{
已启用：false
},
出口：{
已启用：false
},
系列：[{
名称：'随机数据'，
数据：（函数（）{
//生成一个随机数据数组
var数据=[]，
时间=0，
我
socket.on（'chart_data'，函数（示例）{
//将图表数据添加到序列中
时间=sample.x；
对于（i=-19；i，您应该发出两个事件-一个是数据初始化，例如10个点的样本，另一个是时间间隔内的a点提取

您不应以在
series.data=（function（）…
行中的方式初始化数据，而应移动加载时初始化事件并使用

您的系列应该如下所示：

series: [{
  name: 'Random data',
  data: []
}]

events: {
load: function () {
          var series = this.series[0];
          var socket = io.connect('http://localhost:3000');


          socket.on('chart_data_init', function (sample) {
            series.setData(sample.data);
          });

          socket.on('chart_data', function (sample) {
              //add chart data to series
              series.addPoint([sample.x, sample.y], true, false);
          });
      }
  }

加载事件如下所示：

series: [{
  name: 'Random data',
  data: []
}]

events: {
load: function () {
          var series = this.series[0];
          var socket = io.connect('http://localhost:3000');


          socket.on('chart_data_init', function (sample) {
            series.setData(sample.data);
          });

          socket.on('chart_data', function (sample) {
              //add chart data to series
              series.addPoint([sample.x, sample.y], true, false);
          });
      }
  }

然后修改服务器文件，您需要添加带有一些初始化数据的
chart\u data\u init
emission

var initData = (function () {
  var data = [], i = 0, time = new Date().getTime() - 2000 * 10;

  for (; i < 10; i++) {
    data.push({
      x: time + i * 2000,
      y: Math.floor((Math.random() * max) + 1)
    });
  }

  return data;
})();

socket.emit('chart_data_init', {
  data: initData
});

var initData=（函数（）{
var data=[]，i=0，time=new Date（）.getTime（）-2000*10；
对于（；i<10；i++）{
数据推送({
x:time+i*2000，
y:Math.floor（（Math.random（）*max）+1）
});
}
返回数据；
})();
socket.emit（'chart\u data\u init'{
数据：initData
});

必须按升序对数据进行排序，否则Highcharts将无法正确呈现数据

文件夹
index.html

    <html>
<head>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="graph_container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


<script>
 // Instantiate the chart object which plots the samples.
 console.log
      var graph = new Highcharts.chart('graph_container', {
          chart: {
              type: 'spline',
              animation: Highcharts.svg, // don't animate in old IE
              marginRight: 10,
              events: {
                  load: function () {
                      // set up the updating of the chart on each sample
                      var series = this.series[0];
                      var socket = io.connect('http://localhost:3000');


                      socket.on('chart_data_init', function (sample) {
                        series.setData(sample.data);
                      });

                      socket.on('chart_data', function (sample) {
                          //add chart data to series
                          series.addPoint([sample.x, sample.y], true, false);
                      });
                  }
              }
          },
          title: {
              text: 'Live random data'
          },
          xAxis: {
              type: 'datetime',
              tickPixelInterval: 150
          },
          yAxis: {
              title: {
                  text: 'Value'
              },
              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: 'Random data',
              data: []
          }]
      });
</script>

</body>
</html>


//实例化绘制样本的图表对象。
console.log
var graph=新的Highcharts.chart（'graph\u container'{
图表：{
类型：“样条线”，
动画：Highcharts.svg，//不要在旧IE中设置动画
marginRight:10，
活动：{
加载：函数（）{
//设置每个样本的图表更新
var系列=本系列[0]；
var socket=io.connect（'http://localhost:3000');
socket.on（'chart\u data\u init'，函数（示例）{
series.setData（sample.data）；
});
socket.on（'chart_data'，函数（示例）{
//将图表数据添加到序列中
series.addPoint（[sample.x，sample.y]，真，假）；
});
}
}
},
标题：{
文本：“实时随机数据”
},
xAxis：{
键入：“日期时间”，
像素间隔：150
},
亚克斯：{
标题：{
文本：“值”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（'%H:%M:%S'，this.x）+'
'+
数字格式（this.y，2）；
}
},
图例：{
已启用：false
},
出口：{
已启用：false
},
系列：[{
名称：'随机数据'，
数据：[]
}]
});

server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.sockets.on('connection', function (socket) {
    console.log('a user connected');

    socket.on('disconnect', function () {
        console.log('user disconnected');
        // TODO (How-to) release connection (?)
    });

    var max = 100;  // Scale samples from 0 to 100.

    var initData = (function () {
      var data = [], i = 0, time = new Date().getTime() - 2000 * 10;

      for (; i < 10; i++) {
        data.push({
          x: time + i * 2000,
          y: Math.floor((Math.random() * max) + 1)
        });
      }

      return data;
    })();

    socket.emit('chart_data_init', {
      data: initData
    });

    // Generate random samples.
    setInterval(function () {
        var x = (new Date()).getTime(), // current time
            y = Math.floor((Math.random() * max) + 1);

        socket.emit('chart_data', {
            x: x,
            y: y
        });
        console.info("emitted: [" + x + "," + y + "]");
    }, 2000); //update every sec.
});

http.listen(3000, function(){
  console.log('listening on *:3000'); //jalankan server di port 3000
});

var-app=require（'express'）（）；
var http=require（'http'）。服务器（应用程序）；
var io=require（'socket.io'）（http）；
app.get（'/'，函数（req，res）{
res.sendfile（'index.html'）；
});
io.sockets.on（'connection'，函数（socket）{
log（“已连接的用户”）；
socket.on（'disconnect'，function（）{
console.log（'user disconnected'）；
//TODO（如何）释放连接（？）
});
var max=100；//将样本从0缩放到100。
var initData=（fu