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;
  });

});

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

      ]

How can I use the "countries" JSON to be the data for the chart above?

Many examples just declare the JSON inside the "data:[]", is there anywhere to use an external .json file?

回答1:

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>

Check the plunker link for a live demo.

If you see the app.js, I have a commented part below - which is 'NOT-WORKING' related implementation.

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!

来源：https://stackoverflow.com/questions/45307423/angular-fusioncharts-how-to-fetching-data-from-external-json-file

标签

json

angular

fusioncharts