使用AngularJS与C#调用Web API搭建仪表盘无显示问题排查

看起来你已经成功打通了Web API的调用，但AngularJS渲染饼图时没有内容，咱们一步步来排查可能的问题：

1. 确认必要依赖是否正确引入 #

你使用的chart-pie指令属于angular-chart.js（依赖于Chart.js），但你的代码里没有体现这些依赖的引入，也没在Angular模块中注入对应的模块：

• 首先，在index.html的<head>里添加必要的脚本（顺序很重要）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>

• 然后修改你的Angular模块定义，注入chart.js：

var app = angular.module("DemandeApp", ["chart.js"]); // 这里添加了chart.js模块

2. 验证API返回数据是否符合预期 #

虽然你说API调用成功，但要确认返回的数据结构和你代码中期望的一致。在$http.get的回调里添加日志，查看数据：

$http.get("http://localhost:2573/api/demandes")
.then(function (response) {
    console.log("API返回数据：", response.data); // 打印数据到控制台
    $scope.labels = [];
    $scope.data = [];
    angular.forEach(response.data, function (value, key) {
        $scope.labels[key] = value.libelle;
        $scope.data[key] = value.quantite;
    });
    console.log("处理后的labels：", $scope.labels);
    console.log("处理后的data：", $scope.data);
});

打开浏览器的开发者工具（F12）→ Console标签，确认：

• response.data是一个数组
• 每个数组元素都有libelle和quantite字段，且值是有效的（比如quantite是数字类型）

3. 先验证数据是否绑定到Angular作用域 #

在HTML中临时添加数据展示，确认Angular是否正确绑定了变量：

<body ng-app="DemandeApp">
  <div ng-controller="DemCreditController">
    <!-- 临时添加，用于验证数据是否存在 -->
    <div>标签列表：{{labels}}</div>
    <div>数据列表：{{data}}</div>
    
    <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
  </div>
</body>

如果页面上能正确显示labels和data的内容，说明数据绑定没问题，问题出在图表指令的使用上；如果没显示，说明数据没有正确赋值到作用域。

4. 检查图表指令的属性是否正确 #

angular-chart.js的饼图指令要求：

• chart-data必须是数字数组
• chart-labels必须是字符串数组
  确保你的$scope.data里的每个元素都是数字，而不是字符串（如果API返回的是字符串，需要转成数字，比如$scope.data[key] = parseInt(value.quantite)）

修改后的完整代码示例 #

script.js #

var app = angular.module("DemandeApp", ["chart.js"]);
app.controller("DemCreditController", function ($scope, $http) {
    $http.get("http://localhost:2573/api/demandes")
    .then(function (response) {
        $scope.labels = [];
        $scope.data = [];
        angular.forEach(response.data, function (value) {
            // 确保libelle是字符串，quantite是数字
            $scope.labels.push(value.libelle);
            $scope.data.push(Number(value.quantite));
        });
        console.log("绑定的数据：", $scope.labels, $scope.data);
    })
    .catch(function(error) {
        // 加上错误捕获，排查API调用是否真的成功
        console.error("API调用出错：", error);
    });
});

index.html #

<!DOCTYPE html>
<html>
<head>
    <title>Demande Dashboard</title>
    <!-- 引入依赖脚本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
    <!-- 引入angular-chart的样式（可选，但能让图表显示更美观） -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.css">
    <script src="script.js"></script>
</head>
<body ng-app="DemandeApp">
    <div ng-controller="DemCreditController">
        <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
    </div>
</body>
</html>

按照上面的步骤排查，应该能找到问题所在。最常见的原因就是漏掉了chart.js模块的注入，或者API返回的数据格式不符合图表要求。

内容的提问来源于stack exchange，提问作者Caroline