Question

刚开始使用Highcharts，并希望我遇到的问题是相对简单/愚蠢的，我不知道。

我从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;
        }
      });
    })()
  }
]

数据输出格式对于随机和实际看起来相同：

随机：

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

实时：

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

但是，在尝试使用真实数据时，我遇到了高图错误：

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

关于在哪里看的任何建议？我确定我正在做的事情，因为这必须是相当常规的。

Answer 1

'data'超出范围，因此立即函数调用不返回任何数据。声明ajax调用的 var data 强文本输出。像这样：

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

Answer 2

所以这就是最终的工作：

    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;
        })()
    }]

我怀疑如果将数据检索移动到自己的函数中，则不需要'async：false'吗？

Highcharts并通过Ajax加载数据

2 个答案: