Question

新图表和标题说我试图从网络服务中拉出json并将其放入图表（条形图）但我得到了一些奇怪的行为。在我通过$http.get()向下拉数据后，我尝试将系列设置为json的字符串，如series: '$scope.jsondata'。它将填补一些传说（超过预期），因此它获取数据。但是图表上的条形图不会显示出来。

另一方面，当我转到url where I am getting the json并将所有json复制并粘贴到系列字段中时，它完美地运行。

我有一个plunker here我一直在努力表明我在说什么。你可以粘贴：

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

...进入系列领域，一切正常。

编辑我还没有，但我计划每隔x秒使用$interval更新一次数据。类似的东西：

  $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

Answer 1

您可以将图表的创建移动到get调用的回调中以简化操作。 http://plnkr.co/edit/utQG34xOQmtbOukTK71e?p=preview

注意我还将series: '$scope.jsondata'更新为series: $scope.jsondata。

$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);
});

Json的形式很完美，但Highcharts的图表却不会出现

1 个答案: