2017-05-11 29 views
0

私は在庫アプリケーションを作成しています - 私は在庫の値と日付のリストを持っており、フュージョンチャートを使ってチャートを描きたいと思います。 は今、私のデータは次のようになります。フォーマットが正しく読み込まれていないフュージョンチャートデータ

$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は配列を正しく出力しますが、Fusion Chartのデータを代入するとエラーが発生します:

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; 
関連する問題