我正在使用角度图来填充饼图。为了填充图表,我需要$http.get()在服务中进行调用并从控制器调用服务方法。但如果我打电话,图表就不起作用$http

angular.module('shopAdminApp')
.service('ChartService', ['$http',ChartService])

function ChartService($http) {

    this.GetAllChartData = function (month, year) {
        return $http.get('GetMonthlyStatistics?month=' + month + '&&year=' + year + '');
    }
}

angular.module('shopAdminApp')
.controller('chartCtrl', ["ChartService", ChartCtrl]);


function ChartCtrl(ChartService) {
   // this.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
   // this.data = [10, 20, 100];
    
    var promise = ChartService.GetAllChartData(12, 2012);
    promise.then(function (response) {
        console.log(response.data);
        this.chartsdata = response.data;
        this.labels = response.data.BranchNames;
        this.data = response.data.BranchMonthlyTotalSales;
    });
   
  //  console.log(this.chartsdata);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<canvas id="pie1" class="chart chart-pie" data="chart.data" labels="chart.labels" height="300" width="400"></canvas>

如果我取消注释注释部分,饼图工作正常,但我需要使用调用填充值$http我怎样才能做到这一点?


尝试这样:

function ChartCtrl(ChartService) {
    var self = this;

    var promise = ChartService.GetAllChartData(12, 2012);
    promise.then(function (response) {
        self.chartsdata = response.data;
        self.labels = response.data.BranchNames;
        self.data = response.data.BranchMonthlyTotalSales;
    });
}

您必须记住该this关键字引用当前上下文,因此当您处于 Promise 回调函数中时,回调函数this不再指向您的控制器,而是指向回调函数本身。


但你有GetMonthlyStatistics?month=这不是一个网址...

它是一个网址,因为我正在使用带有角度js的.net mvc..和response.data.BranchNames返回我为标签评论的确切数组,response.data.BranchMonthlyTotalSale返回我为数据评论的确切值。我使用 console.log 看到了它。所以没有问题。

您确定服务器的响应正常吗?为什么您不使用拒绝处理函数作为您的 Promise 的第二个参数函数then?

是的,100%确定。那里没问题。我检查了已完成处理程序中的数据和标签的值,它们都正常。但图表没有显示。