javascript - 从未知数量的点初始化 Highcharts 折线图

Question

我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。

目前，我只是尝试使用网络服务中的数据对其进行初始化，但遇到了一些麻烦。根据用户选择的选项，终点可能有一个数据点，也可能有 500 个数据点。我正在尝试设置图表的初始化，因此不会产生任何影响。

我现在可以从临时端点提取数据，该端点仅包含一个数据点用于测试目的:

[
  {
    "time": 1432040070,
    "packets": 12
  }
]

我可以在js中console.leg()这些值，它们按顺序出现，但是当我尝试将它们插入提供该系列的数据数组时，它们不再存在。我希望图表能够像默认情况下一样工作，一旦最初加载数据，就会开始间隔。

这是我用于 $http.get() 和设置系列的代码:

$http.get("https://api.myjson.com/bins/nodx").success(function(returnedData){
                      returnedData.forEach(function(i){
                        console.log(i.time);
                        console.log(i.packets);
                        data.push({
                            x: i.time,
                            y: i.packets
                        });
                      });
                    });
                    console.log(data);

我“插入”数组的数据的格式与我更改初始示例之前的格式相同，因此我不知道为什么它无法工作。和here is a plunker我正在做的事情。

Answer 1

我现在看不到你原来的平板电脑(我昨天看了一眼)，但我建议在图表初始化后添加初始数据。

function initializeData() {
  $http.get("https://api.myjson.com/bins/nodx").success(function(returnedData){

    var newdata = returnedData || getMockedData();
    $scope.chart.series[0].setData(newdata);

    setInterval(updateData, 1000);
  });
}

function updateData() {
  var x = (new Date()).getTime(), // current time
    y = Math.random()*.5;
  $scope.chart.series[0].addPoint([x, y], true, true);
}

$scope.chart = new Highcharts.Chart({
        chart: {
         ...
          events: {
              load: initializeData
          }

你可以检查我的 plunker 中的工作示例(我昨天拿了一份你的副本)http://plnkr.co/edit/smkBEgiAtHBvxdulqMgb