Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/392.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 页面加载时未显示图表_Javascript_Angularjs_Chart.js_Angular Chart - Fatal编程技术网

Javascript 页面加载时未显示图表

Javascript 页面加载时未显示图表,javascript,angularjs,chart.js,angular-chart,Javascript,Angularjs,Chart.js,Angular Chart,我目前正在我的应用程序中使用角度图表。我创建了一个折线图,效果很好,但是当添加第二个图表(饼图)时,第一个图表不会显示在前端,直到我将鼠标悬停在它上面或调整窗口大小 我没有设置悬停事件,因此我不确定为什么会发生这种情况 这是我的控制器 app.controller('dashboardController', ['$scope', '$http', 'Page', 'authenticationService', function ($scope, $http, Page, authentica

我目前正在我的应用程序中使用角度图表。我创建了一个折线图,效果很好,但是当添加第二个图表(饼图)时,第一个图表不会显示在前端,直到我将鼠标悬停在它上面或调整窗口大小

我没有设置悬停事件,因此我不确定为什么会发生这种情况

这是我的控制器

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>

饼图

<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>


通过使用以下代码行设法解决该问题。这有点老套,但它在这种情况下有效

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

控制台是否显示页面加载错误?您看到了吗?有很多解决方案是人们成功的,但我没有。不,看看,这是我在这里面临的问题。信用: