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

【问题标题】：Angular-FusionCharts : How to fetching data from external .json file?Angular-FusionCharts：如何从外部 .json 文件中获取数据？
【发布时间】：2017-12-31 14:57:45
【问题描述】：

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

      ]

如何使用“国家”JSON 作为上图的数据？

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

【问题讨论】：

标签： json angular fusioncharts

【解决方案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，我在下面有一个注释部分 - 这是与“不工作”相关的实现。

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

谢谢，如有任何疑问请告知！

【讨论】：