Highcharts和通過Ajax加載數據

剛開始使用Highcharts，並希望我遇到的問題是相對簡單/愚蠢的，我錯過了。Highcharts和通過Ajax加載數據

我把從Highcharts樣品實時更新的演示 - http://www.highcharts.com/demo/dynamic-update

和修改只是一系列資料片拉「真實」的數據：

原始代碼：

series: [{ 
    name: 'CPU utilization', 
    data: (function() { 
     // generate an array of random data 
     var data = [], 
     time = (new Date()).getTime(), 
     i; 
     for (i = -279; i <= 0; i++) { 
     data.push({ 
      x: time + i * 1000, 
      y: Math.random() * 10 
     }); 
     } 
     return data; 
    })() 
    } 
]

替換爲：

series: [{ 
    name: 'CPU utilization', 
    data: (function() { 
     $.ajax({ 
     url: '/api/data/query', 
     data: query, 
     content: "application/json", 
     type: "POST", 
     success: function (point) { 
      var vals = point.queries[0].results[0].values; 
      var data = [], 
      i; 
      for (i = -vals.length + 1; i <= 0; i++) { 
      data.push({ 
       x: vals[i + vals.length - 1][0], 
       y: vals[i + vals.length - 1][1] 
      }); 
      } 
      return data; 
     } 
     }); 
    })() 
    } 
]

數據輸出格式看起來是id entical隨機和真實：

隨機：

Array[280] 
[0 … 99] 
0: Object 
x: 1365259804521 
y: 9.2204492539

真：

Array[280] 
[0 … 99] 
0: Object 
x: 1365259979000 
y: 3

但是，試圖利用真實數據的時候，我得到highcharts錯誤：

Uncaught TypeError: Cannot call method 'push' of undefined highcharts.js:199 
P.addPoint highcharts.js:199 
$.ajax.success test2.html:265 
c jquery-1.9.1.min.js:3 
p.fireWith jquery-1.9.1.min.js:3 
k jquery-1.9.1.min.js:5 
r

任何建議在哪裏看？我相信我所做的事情，因爲這必須是相當常規的。

來源

2013-04-06 user1552900

這是一個很長的鏡頭，但是如果URL沒有標籤，我就會遇到highcharts和AJAX的問題。不知道，爲什麼。儘管它可能有些不同，但嘗試在URL的末尾添加一個「＃」。 – mrks 2013-04-06 15:22:31

'data'超出範圍，所以立即函數調用不返回任何數據。聲明ajax調用的強文本外部的變量數據。事情是這樣的：

(function() { 
    var data = []; 
    $.ajax({ 
    url: '/api/data/query', 
    ... 
    ... 
})();

來源

2013-04-06 15:32:05

這是有道理的 - 但是，我試着將數據變量一直移動到鏈上，但問題仍然存在。我還將ajax調用設置爲同步以防萬一它是一個計時問題。 FWIW將系列記錄到控制檯顯示隨機數據具有全套280個數據點，而實際數據是不完整的：data：Array [0]與data：Array [280] - 在函數內部，顯然兩者都是顯示完整的280個數據點。 – user1552900 2013-04-06 16:49:28

啊。我認爲我們應該顛倒邏輯。首先使用Ajax調用獲取數據，並在成功處理程序中填充該系列對象。 – 2013-04-06 17:07:17

因此，這是結束了工作：

series: [{ 
     name: 'CPU utilization', 
     data: (function() { 
         var data; 
         $.ajax({ 
         url: '/api/data/query', 
         data: query, 
         async: false, 
         content: "application/json", 
         type: "POST", 
         success: function(point) { 
         data = point.queries[0].results[0].values; 
         } 
         }); 
      return data; 
     })() 
    }]

我懷疑是「異步：假」如果我移動數據檢索到其自身的功能將不再需要？

來源

2013-04-06 23:20:13 user1552900

Highcharts和通過Ajax加載數據

回答

相關問題