Question

我正在尝试使用每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);

我正在推动的数据＆＃34;进入数组的格式与我更改初始示例之前的格式相同，因此idk为什么不能正常工作。我正在研究的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

从未知点数初始化Highcharts折线图

1 个答案: