应用错误收集

如何从多个系列的外部json渲染图表

时间：2019-01-02 17:58:32

标签： jquery html angularjs ajax highcharts

我正在使用具有多个系列的angularjs和highcharts，数据来自外部json。当我使用硬编码的值data.data [0] .data时，它可以正常工作，但是如果我使用带for循环的data.data [i] .data则无法正常工作。任何人都可以帮助我。以下是代码。 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]
}]

1 个答案:

答案 0 :(得分：0)

这里是多个系列的有效代码，作业中存在问题

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