在頁面加載時不顯示圖表

我目前在我的應用程序中使用角度圖表。我創建了一個完美工作的折線圖，但是當添加第二個圖表（餅圖）時，第一個圖表不會顯示在前端，直到我將其懸停在其上或調整窗口大小。在頁面加載時不顯示圖表

我沒有設置懸停事件，所以我不確定爲什麼會發生這種情況。

這裏是我的控制器

app.controller('dashboardController', ['$scope', '$http', 'Page', 'authenticationService', function ($scope, $http, Page, authenticationService) { 

// Page Setup 
Page.setTitle('Dashboard'); 
Page.setSubTitle('Transport Overview'); 
$scope.$emit('pageLoading'); 

$http({ 
    url: '/api/dashboard/', 
    method: 'GET', 
    headers: authenticationService.getAuthToken(), 
}).success(function (data) { 

    $scope.dashboard = data; 
    $scope.dashboard.revenuePerDayLabels = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 

    $scope.dashboard.weeklyJobIncome = [data.weeklyJobIncome]; 
    $scope.dashboard.weekVehicleRevenueLabels = []; 
    $scope.dashboard.weekVehicleRevenueData = []; 

    angular.forEach($scope.dashboard.weekVehicleRevenue, function (item) { 
     $scope.dashboard.weekVehicleRevenueLabels.push(item.registrationNumber); 
     $scope.dashboard.weekVehicleRevenueData.push(item.vehicleRevenue); 
    }); 

    $scope.$emit('pageLoaded'); 
}).error(function() { 
    $scope.$emit('pageLoaded'); 
}); 
}]);

以及相應的HTML

線圖

<canvas id="line" class="chart chart-line" 
     chart-data="dashboard.weeklyJobIncome" 
     chart-labels="dashboard.revenuePerDayLabels" 
     chart-series="series"> 
</canvas>

餅圖

<canvas id="doughnut" class="chart chart-pie" 
     chart-data="dashboard.weekVehicleRevenueData" 
     chart-labels="dashboard.weekVehicleRevenueLabels"> 
</canvas>

來源

2016-03-25 JohnCooling

控制檯在頁面加載時是否顯示任何錯誤？ –

一點都沒有。 – JohnCooling

你見過這個嗎？ https://github.com/jtblin/angular-chart.js/issues/29有相當多的解決方案，人們已經成功與 –

管理使用下面的代碼行來解決此問題。它有點怪異，但它適用於這種情況。

window.dispatchEvent(new Event('resize'));

來源

2016-03-25 21:29:36 JohnCooling

credit：https://github.com/jtblin/angular-chart.js/issues/29#issuecomment-81541417 –

在頁面加載時不顯示圖表

回答

相關問題