Javascript 使用角度图在一页中显示多个饼图

我正在创建一个管理仪表板，所以我需要在同一页中提供两个饼图。我正在使用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>