Question

我正在研究AngularJS，我正在尝试使用Highcharts和REST API集成图表。

但是，我无法获取数据：

$scope.myData = function() {

  Charts.query({
    id: $scope.currentState.id, 
    name: $scope.currentState.name
  }, 
  function(data) {
    $scope.charts = data;
  });

};

$('#chart').highcharts({
    title: {
        text: ''
    },
    xAxis: {
        categories: $scope.charts.timestamp
    },
    yAxis: {
      title: {
        text: 'test'
      }
    },
    series: [{
        data: $scope.charts.value
    }]
});

第一部分连接到REST API，第二部分生成图表。目前，我收到以下错误：TypeError: Cannot read property 'value' of undefined。

拜托，有人可以帮助我吗？

更新：完整代码（http://plnkr.co/edit/ZgrDmKArfxFrMoAEFoTc）和JSON（http://pastebin.com/TX2pLHHe）。

Answer 1

您的代码在控制器中同步运行，但数据是异步进入的。当您拨打$('#chart').highcharts(...)功能时，您的数据尚未到达，因此未定义$scope.charts，这就是您无法读取＆＃34;无法读取＆＃39;值的原因。未定义＆＃34;错误（$ scope.charts =未定义，因此它没有值属性！）。

您需要在查询的回调中调用highcharts函数。例如（这是未经测试的）：

$scope.myData = function() {

  Charts.query({
    id: $scope.currentState.id, 
    name: $scope.currentState.name
  }, 
  function(data) {
    $scope.charts = data;
    drawChart(); // <= this is when you invoke the drawing of the chart because data has finally arrived!
  });

};

var drawChart = function(){ 
    $('#chart').highcharts({
        title: {
            text: ''
        },
        xAxis: {
            categories: $scope.charts.timestamp
        },
        yAxis: {
          title: {
            text: 'test'
          }
        },
        series: [{
            data: $scope.charts.value
        }]
    });
}

将Highcharts与REST API集成

1 个答案: