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

I am trying to use the line chart in highcharts that updates every x seconds. Ideally I want it to initialize with some specific data and poll a webservice every x seconds, and update accordingly.

我试图使用高图表中的线图表,每隔x秒更新一次。理想情况下,我希望它使用某些特定数据进行初始化,并每隔x秒轮询一次Web服务,并相应地进行更新。

Currently I am just trying to initialize it with data from a webservice and am having some trouble. Depending on which option the user selects there may be one point of data at the end point, or there may be 500. I am trying to set up the initialization of the chart so it doesn't make a difference.

目前我只是尝试使用来自Web服务的数据初始化它并且遇到了一些麻烦。根据用户选择的选项,终点可能有一个数据点,或者可能有500个。我正在尝试设置图表的初始化,因此它没有任何区别。

I can pull the data in fine from a temp endpoint right now, that only houses one point of data for testing purposes:

我现在可以从临时端点提取数据,只有一个数据点用于测试目的:

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

I can console.leg() these values in the js and they appear in order, but when I try and push them into the data array that feeds the series, they are no longer there. I'd like the chart to work just as it does by default, once the data is loaded initially then it starts the interval.

我可以在js中控制这些值,然后按顺序显示这些值,但是当我尝试将它们推送到为系列提供数据的数据数组时,它们就不再存在了。我希望图表能够像默认情况一样工作,一旦数据最初加载,它就会启动间隔。

This is the code I use for the $http.get() and setting the series:

这是我用于$ 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);

The data I am "pushing" into the array is in the same format as it was before I changed the initial example so idk why it wouldne't be working. And here is a plunker of what I am working on.

我正在“推送”到数组中的数据格式与我更改初始示例之前的格式相同,因此idk为什么不能正常工作。这里有我正在研究的东西。

1 个解决方案

#1

I can't see your original planker now (I took a short look yesterday) but I would suggest adding initial data after chart is initialized itself.

我现在看不到你原来的计划员(我昨天看了一下)但我建议在图表初始化之后添加初始数据。

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
          }

You can check my plunker for a working example (I took a copy of yours yesterday) http://plnkr.co/edit/smkBEgiAtHBvxdulqMgb

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

#1