Как визуализировать старшие графики из внешнего JSON для нескольких серий - PullRequest
Новая
       8

Как визуализировать старшие графики из внешнего JSON для нескольких серий

0 голосов
/ 02 января 2019

Я использую 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]
}]

1 Ответ

0 голосов
/ 03 января 2019

Вот рабочий код для нескольких серий, возникла проблема в назначении 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...