如何从外部 json 为多个系列渲染 highcharts答案

【问题标题】：How to render highcharts from external json for multiple series如何从外部 json 为多个系列渲染 highcharts
【发布时间】：2019-05-29 09:02:34
【问题描述】：

我正在使用具有多个系列的 angularjs 和 highcharts，数据来自外部 json。当我使用硬编码值 data.data[0].data 时，它工作正常，但如果我使用 data.data[i].data 和 for 循环，它不起作用。任何人都可以帮助我。这是下面的代码。 https://plnkr.co/edit/NPmG56Xd7TuYohRH2lZJ?p=preview

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="container"></div>
</div>

脚本

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
  $http({
    method: "get",
    url: "chart.json",
    // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  }).
  then(function(data) {
    $scope.data = data.data[0].data;
    console.log($scope.data);
    Highcharts.chart('container', {

      title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
      },

      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },

      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },

      series: [{
        data: $scope.data
      }],
    });
  })    
});

chart.json

[{
    "name": "Installation",
    "data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    "name": "Manufacturing",
    "data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}]

【问题讨论】：

标签： jquery html angularjs ajax highcharts

【解决方案1】：

这是多个系列的工作代码，作业中有问题

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
  $http({
    method: "get",
    url: "chart.json",
    // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  }).
  then(function(data) {
    $scope.data = data.data;
    Highcharts.chart('container', {

      title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
      },

      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },

      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },

      series: $scope.data,



    });
  })

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="script.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div id="container"></div>
  </div>
</body>

</html>

分配数据更改
$scope.data = data.data[0].data;

改为

$scope.data = data.data;

将系列分配给图表

系列：$scope.data

【讨论】：