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加载数据

回答

相关问题