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

Question

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作为图表数据

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

      ]

如何使用"countries" JSON作为上图的数据？

许多示例只是在 "data:[]" 中声明了 JSON，是否有任何地方可以使用外部 .json 文件？

Answer 1

嘿，我们可以做如下事情：

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>

检查 plunker link 以获得现场演示。

如果你看到 app.js，我在下面有一个评论部分 - 这是 'NOT-WORKING' 相关的实现。

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

谢谢，如有任何问题，请告诉我！

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

Angular-FusionCharts : How to fetching data from external .json file?

json

angular

fusioncharts