除非我重新路由到另一个页面并返回到我的图表路线，否则图表不会呈现

Question

我正在制作仪表板图表。我使用chartjs为我的图表和angularjs http.get方法从服务器获取数据到我的图表。我检查了控制台，数据已加载并正常工作，但除非我重新路由到另一个页面，然后返回到我的图表路径页面，否则图表将不会呈现。

这是代码：

$scope.tripTotalts = "";
$scope.tripdstatus = "";
$scope.tripddstatus = "";
$scope.tripcstatus = "";
$scope.totalshow = "";

$scope.tripStatus = function() {

    $http.get("/api/statusDispatched").success(function(response) {
        dispatched = response;
         $scope.tripdstatus = response[0];
    });

    $http.get("/api/statusDelivered").success(function(response) {
        delivered = response;
        $scope.tripddstatus = response[0];
    });

    $http.get("/api/totalTripsintheSystem").success(function(response) {
        $scope.tripTotalts = response[0];
        totalFleetTrips = response[0];
    });

    $http.get("/api/statusCompleted").success(function(response) {
        completed = response;
        $scope.tripcstatus = response[0];
    });

    $scope.totalshow = Math.round(((dispatched+delivered+completed) / totalFleetTrips) * 100)

    console.log("CHECKOUT HERE");
    console.log(dispatched);
    console.log(delivered);
    console.log(completed);

    var tstatid = $("#tstatusChart");
    tstatid.attr('height', 100);
    var tripsatusChartInitiate = new Chart(tstatid, {
        type: 'pie',
        data: {
            datasets: [{
                data: [dispatched, delivered, completed],
                backgroundColor: [
                    "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                    "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                    "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
                ],
                borderColor: [
                    "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                    "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                    "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
                ], borderWidth: 1
            }],
            labels: ["Dispatched", "Delivered", "Completed"]
        },
        options: {
            tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var allData = data.datasets[tooltipItem.datasetIndex].data;
                            var tooltipLabel = data.labels[tooltipItem.index];
                            var tooltipData = allData[tooltipItem.index];
                            var total = 0;
                            for (var i in allData) {
                                total += allData[i];
                            }
                            var tooltipPercentage = Math.round((tooltipData / total) * 100);
                            return '[Day: ' +tooltipLabel + '] Data: ' + tooltipData + ' [Percentage: ' + tooltipPercentage + '%]';
                        }
                    }
                },
                animation: {
                    duration: 0
                }
        }
        });

}