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，我在下面有一个评论部分 - 这是'不工作'的相关实现。

我将更详细地研究它。似乎问题是$ observe没有深入观察Object结构的变化。所以这些东西只有在我们更新引用时才有用。所以直到那时，请按照上述步骤操作。

如果有任何疑虑，请致谢和lemme！

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

1 个答案: