Javascript Json格式完美，但无法填充Highcharts

highcharts是新手，正如标题所说，我试图从Web服务中提取json并将其放入图表条形图中，但我遇到了一些奇怪的行为。通过$http.get向下拉取数据后，我尝试将序列设置为类似json的序列字符串：“$scope.jsondata”。它将填充比预期更多的图例，因此它正在获取数据。但图表上的条形图不会显示

另一方面，当我转到并将所有json复制并粘贴到series字段中时，它可以完美地工作

我有一个我一直致力于展示我所说的东西的例子。您只需粘贴：

[
  {
    "name":"Kaia",
    "data":[19]
  },
  {
    "name":"Deborah",
    "data":[86]
  },   
  {
    "name":"Phoebe",
    "data":[77]
  },
  {
    "name":"Rory",
    "data":[17]
  },
  {
    "name":"Savannah",
    "data":[15]
  }
] 

…进入系列字段，一切正常

编辑我还没有，但我计划使用$interval每x秒更新一次数据。比如：

  $http.get(fullUrl).success(function(data2) {
    $scope.records = [];
    data2.forEach(function(r) {
      $scope.records.push(r);
    });
  });     
  mainInterval = $interval(function() {
    $http.get(fullUrl).success(function(data2) {
      $scope.records = [];
      data2.forEach(function(r) {
        $scope.records.push(r);
      });
    });
  }, 5000); 

---

因此，正如其中一个答案所建议的那样，我将图表创建放在$http.get的回调中，但我认为这会阻碍$interval的使用。您可以将图表创建移到get调用的回调中，以简化事情

注意：我还将系列：“$scope.jsondata”更新为系列：$scope.jsondata

---

这是可行的，但我计划使用$interval每x秒点击一次url来刷新数据。把图表放在回调中会把事情搞砸吗？在我看来是这样的

$http.get('https://api.myjson.com/bins/38qm9').success(function(ret) {
    $scope.jsondata = ret;
    var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          type: 'bar'
        },
        title: {
          text: 'Active Users'
        },
        xAxis: {
          categories: ['user']
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Total Score',
            align: 'high'
          },
          labels: {
            overflow: 'justify'
          }
        },
        plotOptions: {
          bar: {
            dataLabels: {
              enabled: true
            }
          }
        },
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'top',
          x: -40,
          y: 100,
          floating: false,
          backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: false
        },
        credits: {
          enabled: false
        },
        series: $scope.jsondata
    });

    console.debug($scope.jsondata);
});