Angular-FusionCharts:如何从外部.json文件获取数据? [英] Angular-FusionCharts : How to fetching data from external .json file?
问题描述
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作为图表数据.
I want to use the above JSON as the chart data.
$scope.dataSource = {
"chart": {
"caption": "Column Chart Built in Angular!",
"captionFontSize": "30",
"captionPadding": "25",
........
},
"data": [
]
如何使用国家/地区" JSON作为上面图表的数据?
How can I use the "countries" JSON to be the data for the chart above?
许多示例只是在"data:[]"中声明了JSON，是否可以在任何地方使用外部.json文件?
Many examples just declare the JSON inside the "data:[]", is there anywhere to use an external .json file?
推荐答案
嘿，我们可以做以下事情:
Hey we can do something like the following:
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="angular.js@1.5.x" 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>
查看"punker" 链接进行实时演示.
Check the plunker link for a live demo.
如果您看到app.js，我在下面有一个注释部分-与'NOT-WORKING'相关的实现.
If you see the app.js, I have a commented part below - which is 'NOT-WORKING' related implementation.
我将详细介绍它.看来问题在于$ observe没有深入观察Object结构的变化.因此，仅当我们更新参考时，这些东西才起作用.因此，在此之前，请按照上述步骤操作.
I shall be looking to it in more detail. It seems the issue is $observe is not watching deeply for changes in Object structure. So the stuff works only when we update the reference. So untill then, please follow the above step.
万一有问题，谢谢和莱姆知道！
Thanks and lemme know in case of any concern!
这篇关于Angular-FusionCharts:如何从外部.json文件获取数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
