2017-05-11 17 views
0

재고 응용 프로그램을 쓰고 있습니다. 재고 값과 날짜 목록이 있으며 퓨전 차트를 사용하여 차트를 그립니다. 지금 내 데이터는 다음과 같습니다Fusioncharts 형식의 데이터가 제대로로드되지 않았습니다.

$scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" }, { "label": "2017-05-10", "value": "928.78" }, { "label": "2017-05-09", "value": "932.17" }, { "label": "2017-05-08", "value": "934.3" }, { "label": "2017-05-05", "value": "927.13" }, { "label": "2017-05-04", "value": "931.66" }, { "label": "2017-05-03", "value": "927.04" }, { "label": "2017-05-02", "value": "916.44" }, { "label": "2017-05-01", "value": "912.57" }, { "label": "2017-04-28", "value": "905.96" } ] 

그리고 컨트롤러는 다음과 같습니다 차트의

App.controller('StockController', [ '$scope', '$http', '$routeParams', 
     '$rootScope', function($scope, $http, $routeParams, $rootScope) { 
      $scope.dataSource ={}; 
      $scope.chartData = []; 

      $scope.getStockData = function(stockID) { 
       $scope.loading = true; 
       $scope.content = false; 
       $http.get('/stock', { 
        params : { 
         stockID : encodeURI(stockID) 
        } 
       }).then(function(response) { 
        $scope.showError = false; 
        $scope.stock = response.data; 
        $scope.stockAvailable = true; 

        const r = response.data.dates.map((d, i) => Object.assign({ 
          label: d, 
          value: response.data.stockValues[i] 
         })) 

        $scope.data = JSON.stringify(r, null, 10); 
        $scope.chartData = $scope.data; 
        $scope.dataSource = { 
          chart: { 
           "caption": "Price of the stock", 

          }, 
          data: $scope.chartData 
          }; 

       }, function(response) { 
        $scope.showError = true; 
       }).finally(function() { 
        // called no matter success or failure 
        $scope.loading = false; 
        $scope.content = true; 

        }); 
      }; 
     } ]); 

HTML 부분 :

<div ng-controller="StockController" ng-show="content"> 
     <fusioncharts width="100%" height="400" type="line" 
      dataFormat="json" dataSource="{{dataSource}}"> </fusioncharts> 
    </div> 

문제는 그 나는 인쇄 할 때 $ scope.chartData 배열에 올바르게 인쇄하는 페이지에 있지만 퓨전 차트 데이터를 할당하면 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'length' of undefined 

그래서 어떻게 든 데이터가 차트에로드되지 않는 것 같습니다. 왜 그런지 알고 있니?

답변

0

문제점을 해결할 수있었습니다. 문제는 내가 JSON.stringify를 사용하여 JSON을 FusionCharts에서 읽을 수 없도록 만드는 새로운 라인 기호를 추가 한 것입니다.

const r = response.data.dates.map((d, i) => Object.assign({ 
         label: d, 
         value: response.data.stockValues[i] 
        })) 
$scope.dataSource.data = r; 
:

해결책은 단순히 데이터를 도표화 값 내 배열을 전달하는