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 ]
    }
  ]

};

我在 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>

<强> CODE

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 ...）调入控制器，并将其结果添加到您的数据中，然后您就可以创建图表。

如何在外部javascript函数中使用AngularJs作用域

2 个答案: