将数据传递给 AngularJS 图表中的 $scope答案

【问题标题】：Pass data to $scope in AngularJS chart将数据传递给 AngularJS 图表中的 $scope
【发布时间】：2015-06-11 06:22:11
【问题描述】：

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

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

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

我可以知道$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
        });
    })

【问题讨论】：

您的回复如何？您希望将什么传递给$scope.labels 和$scope.data？
我想将 Markets.PlanName 和 Markets.PlanAmount 传递给 $scope.data。我认为 $scope.labels = ['PlanName', 'PaymentAmount'];我试过 $scope.data = [d.PlanName, d.PaymentAmount];但它失败了。
PlanName 似乎是一个刺痛和PaymentAmount 一个数字，对吧？ $scope.data 获取一系列数据，例如[1,2,3,4]。如果是条形图，您可以分配单个数组或一组数组。
我已经添加了我开发的 Web 应用程序。感谢您是否可以帮助解决问题。
PlanName 似乎是一个字符串，而 PaymentAmount 似乎是一个数字。我尝试使用下面的代码，但仍然失败。 $scope.labels = ['PlanName', 'PaymentAmount']; $scope.data = [$scope.Markets.PlanName, $scope.Markets.PaymentAmount];

标签： javascript asp.net asp.net-mvc angularjs

【解决方案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>

还有一个控制器：

 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
         });

【讨论】：

我已经添加了我开发的 Web 应用程序。感谢您是否可以帮助解决问题。
响应样本会更有帮助。
我想将数据列表传递给图表 X 和 Y 轴数据，并转换为条形图。
我明白了。您希望 ['PlanName', 'PaymentAmount'] 作为 x 轴上的标签，并且需要获取 y 轴的数据。但由于我不知道 MarketService.GetMarketList() 的响应格式，我还不能给出正确的答案。
我明白了。 MarketService.GetMarketList() 将从 Displaycharts 控制器 - ColumnCharts 函数中获取列表数据。数据为 [PlanName, PaymentAmount] 17974 半年 152324 季度 5393 年

【解决方案2】：

确保您以适当的格式分配数据（数组），例如：

$scope.labels = ["Item1", "Item2", "Item3"];
$scope.data = [300, 500, 100];

希望这会有所帮助。

【讨论】：