Angular-FusionCharts：外部の.jsonファイルからデータを取得する方法は？

ar app = angular.module('chartApp', ['ng-fusioncharts']); 

app.controller("MyController2", function($scope, $http){ 

    $http.get('js/data.json').then(function(res,status,xhr){ 
    $scope.countries = res.data; 
    }); 

});

上記のJSONをチャートデータとして使用したいと考えています。Angular-FusionCharts：外部の.jsonファイルからデータを取得する方法は？

$scope.dataSource = { 
    "chart": { 
     "caption": "Column Chart Built in Angular!", 
     "captionFontSize": "30", 
     "captionPadding": "25", 
     ........ 
    }, 
    "data": [ 

     ]

"countries" JSONを上記のチャートのデータとして使用するにはどうすればよいですか？

多くの例では、"data:[]"の内部にJSONが宣言されていますが、外部の.jsonファイルを使用する場所はありますか？

出典

2017-07-25 WorldPeace

ねえ、私たちは次のように行うことができます。

angular.module('plunker', ['ng-fusioncharts']) 
 
    .controller('MainCtrl', ['$scope', '$http', function($scope, $http) { 
 
    const chartProps = { 
 
     "caption": "Monthly", 
 
     "xaxisname": "Month", 
 
     "yaxisname": "Revenue", 
 
     "numberprefix": "$", 
 
     "theme": "fint" 
 
    }; 
 
    const getDataSource = (data = [], chart = chartProps) => { 
 
     return { 
 
     chart, 
 
     data 
 
     } 
 
    }; 
 

 
    $http.get('./data.json') 
 
     .then(({ 
 
     data 
 
     }) => $scope.dataSource = getDataSource(data)); 
 

 
    $scope.dataSource = getDataSource(); 
 
    }]);

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 

 
    <script src='https://static.fusioncharts.com/code/latest/fusioncharts.js'></script> 
 
    <script src='https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js'></script> 
 
    <script src='https://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js'></script> 
 

 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <fusioncharts id="mychartcontainer" chartid="mychart" width="600" height="400" type="column2d" dataSource="{{dataSource}}"></fusioncharts> 
 
</body> 
 

 
</html>

をライブデモ用plunker linkを確認してください。

app.jsが表示されている場合は、以下のコメント部分があります。これは、 'NOT-WORKING'関連の実装です。

私はもっと詳しく調べる予定です。問題は、オブジェクト構造の変更が深く見ていないことです。だから、私たちが参照を更新するときにのみ、そのことが働きます。それまでは、上記の手順に従ってください。

お気軽にお問い合わせください。

出典

2017-08-12 20:15:45 Ayan

Angular-FusionCharts：外部の.jsonファイルからデータを取得する方法は？

答えて

関連する問題