0

刚开始使用 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 

但是,当尝试使用真实数据时,我遇到了 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

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

4

2 回答 2

0

“数据”超出范围,因此立即函数调用不返回任何数据。在 ajax 调用之外声明var 数据强文本。像这样的东西:

(function() {
  var data = [];
  $.ajax({
    url: '/api/data/query',
    ...
    ...
})();
于 2013-04-06T15:32:05.997 回答
0

所以这就是最终的工作:

    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'?

于 2013-04-06T23:20:13.513 回答