将Highcharts-ng与JSON结合使用

Question

For display the chart, y use the tipical way:

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }
});>

But i want load the data from a remote json.

I tried using the method described in the official documentation, but with angular it does not work. I'm using highchart-ng but i dont know how to load remote JSON-Files.

I'm researching how to use $http.get but still i dont know how to use it.

Thanks!

Answer 1

Change the Data ofr your chart to be within a variable:

var chartData = [];
[...]
series: [{
     data: chartData
}],
[...]

Then you can use the $http-Service like the following:

$http.get('/PATH/TO/MY/JSON')
  .success(function(jsonData){
      // Do some remodeling of the jsonData if necessary, else just give it to the chart:
      chartData = jsonData;
  }

The $http -Service of Angular works promise based - this means that you provide the callback of the request within .success and .error -Functions. Its pretty good explained in the official docs .