我正在创建一个管理仪表板,所以我需要在同一页面中提供两个饼图。我正在使用 angular-chartjs 创建饼图。当我尝试显示两个饼图代码时,两个饼图都正确显示当另一个饼图代码被注释时(即两者都单独工作),然后只有第二个加载图例并且第一个饼图空间为空白,只有图例正在显示。当我将光标移动到空白处时,第一个图表出现在屏幕上。同样,如果我重新加载页面,则仅显示第二个图表。这是我的代码
$scope.labels = userList;
$scope.labels1 = userList;
$scope.TCollectedActuals = CA;
$scope.TForecastAmount = FA;
html
<div class="col-md-4" id="chart1">
<div class="panel panel-primary" ng-show="sanClaimAmount.length > 0">
<div class="panel-heading">
<h3 class="panel-title">Collected Actuals</h3>
</div>
<div class="panel-body">
<canvas id="ca" class="chart chart-doughnut"
chart-data="TCollectedActuals" chart-labels="labels" legend="true">
</canvas>
</div>
</div>
</div>
<div class="col-md-4" id="chart2">
<div class="panel panel-primary" ng-show="sanClaimAmount.length > 0">
<div class="panel-heading">
<h3 class="panel-title">Forecast Amount</h3>
</div>
<div class="panel-body">
<canvas id="fa" class="chart chart-doughnut"
chart-data="TForecastAmount" chart-labels="labels1" legend="true">
</canvas>
</div>
</div>
</div>
我在网上搜索了同样的问题,但没有答案。需要帮助。