Как использовать область AngularJs во внешней функции javascript

Question

Я пытаюсь нарисовать диаграмму, используя Chart.js. Данные поступают из моего API, и я знаю, что формат в порядке. Я не знаю, как передать данные, полученные из API, в функцию javascript.

В мой контроллер, я получил:

$http.get('/api/bilan').then(function(result) { 
    $scope.finances = result.data; 
}); 

А вот отрывок из которого я должен передать данные:

var bilans = { 
    labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], 
    datasets : [ 
    { 
     data : [ TheDataFromTheApi ] 
    } 
    ] 

}; 

Что shoudl я положил в TheDataFromTheApi? или как правильно это сделать?

Answer 1

Используйте существующую библиотеку Chart.js, которая уже конвертировала код в угловом стиле.

Просто вам необходимо включить angular-chartjs.js

А затем вводят в модель angular.module('myApp', ['chart.js'])

После этого вы можете использовать его в качестве атрибута в любом месте вы хотите.

HTML

<canvas class="chart chart-bar" data="bilans.data" labels="bilans.labels" series="bilans.series"></canvas> 

КОД

var app = angular.module("Bar_Chart", ["chart.js", "ui.bootstrap"]); 
app.controller('mainCtrl', function($scope,$http) { 
    // you can get this data by ajax 
    var TheDataFromTheApi = [1,2,3,4,5,6,7,8,9,10,11,12]; 
    $scope.bilans = { 
     labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], 
     data: [TheDataFromTheApi], 
     series:["Months"] 
    }; 
}); 

Working Plunkr Для вашего кода.

Answer 2

Вы должны передавать данные в диаграмму через угловой контроллер.

Вызовите свою службу ($ http.get ...) в контроллер и добавьте ее результат в свои данные, тогда вы сможете создавать свои диаграммы.