Json的完美形式，但Highcharts图表将不填充

  • Z时代
  • 2024-01-10
  • 分类：问答

新建highcharts和标题说我想从一个web服务拉JSON，并将其放入图表（柱状图），但我得到一些奇怪的行为。我拉数据下来后通过$http.get()我尝试了一系列设置为JSON像series: '$scope.jsondata'该字符串。它会填补一些传说（超过预期），以便获取数据。但图表上的条不会显示。Json的完美形式，但Highcharts图表将不填充

就当我去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] 
    } 
]

...进入系列字段，一切正常。

编辑我还没有，但我打算使用$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的回调来简化事情。 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图表将不填充 的全部内容， 来源链接： utcz.com/qa/257816.html

回到顶部