[英]How to use AngularJs scope in an external javascript function
我嘗試使用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 ]
}
]
};
我應該在TheDataFromTheApi中添加什么? 或如何正確地做到這一點?
使用現有的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"]
};
});
工作的Plunkr為您的代碼。
您應該通過角度控制器將數據傳遞到圖表中。
將服務($ http.get ...)調用到控制器中,然后將其結果添加到數據中,這樣便可以創建圖表了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.