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": [ 

     ]

我如何使用「國家」 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文件中獲取數據？

回答

相關問題