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文件的地方？

答

嘿，我们可以做一些这样的：

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'相关的实现。

我将更详细地寻找它。看来问题是$观察并没有深入观察对象结构的变化。所以这些东西只有在我们更新参考时才有效。所以，请按照上述步骤操作。

谢谢，让我知道在任何情况下！

Angular-FusionCharts：如何从外部.json文件中获取数据？

相关推荐