javascript - 将数据传递到 AngularJS 图表中的 $scope

Question

我正在使用带有 AngularJS 和 chart.js 的 asp .net mvc 网络应用程序来创建图表。

以条形图为例: http://jtblin.github.io/angular-chart.js/

我有一个来自 MVC Controller 的数据列表，我想将这些数据传递给 Angular Controller 。/Displaycharts/Columnchart 是从 c# Controller 到 Angular Controller 获取数据列表的链接。

我可以知道 $scope.labels 和 $scope.data 分配正确吗？如果您能帮助修改示例和 SQL 脚本，我们将不胜感激 downloaded from here .

谢谢!

代码:

angular
    .module('MyApp', 'Chart.js', 'DisplaychartsngController.js')
    .controller('DisplaychartsngController', function ($scope, MarketService) {
        $scope.Markets = null;
        MarketService.GetMarketList().then(function (d) {
            $scope.Markets = d.data; //Success callback
            $scope.labels = $scope.Markets.PlanName;
            $scope.series= ['PaymentAmount'];
            $scope.data = $scope.Markets.PaymentAmount;

        }, function (error) {
            alert('Error!'); // Failed Callback
        });
    })

Answer 1

如果数据以 JSON 形式返回到 $scope.Markets。然后你会像访问一个对象一样应用它。例如:

$scope.Markets = d.data; //Success callback
$scope.labels = $scope.Markets.labels;  
$scope.data = $scope.Markets.data;

由于我不确定响应的格式，我无法确定，如果这不正确，也许可以用响应示例进行评论，我会编辑答案。

编辑:

像这样的 HTML:

<div ng-controller="DisplaychartsngController">
    <canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
</div>

还有一个 Controller :

 angular.module("MyApp", ["chart.js"])
        .controller("DisplaychartsngController", function ($scope) {
             $scope.labels = ['Half Yearly', 'Quarterly', 'Yearly']
             $scope.data = [['17974', '152324','5393']]; 
             $scope.series = ['PaymentAmount']; //what you want to call your series
         });