Angular js의 json 데이터를 사용하여 Highchart 채우기

json 파일의 데이터를 Highchart에 채우려고합니다. 내 예를 들어 JSON 파일이 Highchart 예와 동일, 내 data.json는 다음과 같습니다Angular js의 json 데이터를 사용하여 Highchart 채우기

이

{"yData":[{ 
      "name": "Tokyo", 
      "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      "name": "New York", 
      "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      "name": "Berlin", 
      "data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      "name": "London", 
      "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }]}

내 html 파일이

<!DOCTYPE> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>High chart using directive</title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
</head> 
 
<body> 
 
    <section ng-app="charts"> 
 
    <div ng-controller="Ctrl"> 
 
     <highchart chart='{{renderChart}}'></highchart> 
 
     <table> 
 
      <tr ng-repeat="record in jsondatafeed"> 
 
       <td>{{record.Name}}</td> 
 
       <td>{{record.Score}}</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    </section> 
 
</body> 
 
</html>

var app = angular.module('charts', []); 
 

 
app.directive('highchart', function() { 
 
return { 
 
    restrict: 'E', 
 
    template: '<div></div>', 
 
    replace: true, 
 

 
    link: function (scope, element, attrs) { 
 

 
     scope.$watch(function() { return attrs.chart; }, function() { 
 

 
      if (!attrs.chart) return; 
 

 
      var charts = JSON.parse(attrs.chart); 
 

 
      $(element[0]).highcharts(charts); 
 

 
     }); 
 
    } 
 
}; 
 
}); 
 

 

 
app.controller('Ctrl', function ($scope, $http, $timeout) { 
 
$http.get('data.json').success(function (data, status) { 
 

 
    var score = []; 
 
    
 

 
    var name = []; 
 
    for (var i = 0; i < data.length; i++) { 
 
     name.push(data[i].Name); 
 
\t \t for (var j = 0; j < data.length; j++) { 
 
     score.push(data[j].Score); 
 
    } 
 
    } 
 

 
    $scope.renderChart = { 
 
     chart: { 
 
      type: 'line' 
 
     }, 
 
     xAxis: { 
 
      categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
     }, 
 
\t \t yAxis: { 
 
      title: { 
 
       text: 'Temperature (°C)' 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     series: [{ 
 
\t \t \t name: name, 
 
      data: score 
 
     }], 
 
\t \t 
 
\t \t 
 
     legend: { 
 
      enabled: false 
 
     } 
 
    }; 
 
}).error("error message"); 
 
$timeout($scope.fetch, 1000); 
 
});

입니다 이제 나는 피를 수있다. 하나의 이름과 데이터에 대한 차트 opable

하지만 나는 모든 데이터를 json 파일에서 피드해야합니다. 내가 여기서 누락 된 점은 무엇입니까? 감사 Vinoth Kannan은 P

출처

2016-08-21 vinoth

당신은 여기

$scope.jsondatafeed = data.yData; 
    console.log($scope.jsondatafeed); 
    $scope.Plotcat = []; 
    $scope.PlotData = []; 
    for (var key in $scope.jsondatafeed) { 
     console.log($scope.jsondatafeed[key]); // the whole array (index) 
     $scope.PlotData.push($scope.jsondatafeed[key]); 
     var category = $scope.jsondatafeed[key]; 
     $scope.Plotcat.push(category.name); 
    }

그것은 지금 작동 DEMO APP

출처

2016-08-21 18:15:22 Sajeetharan

입니다 시리즈로 데이터 배열을 밀어해야합니다. 모든 데이터가 채워집니다 – vinoth

이제 작동합니다. 모든 데이터가 채워집니다 – vinoth

이제 작동합니다. 모든 데이터가 채워집니다. – vinoth

Angular js의 json 데이터를 사용하여 Highchart 채우기

답변

관련 문제