Question

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

我在网上搜索我有同样的问题，但没有答案。需要帮助。

使用angular-chartjs在一个页面中使用多个饼图

0 个答案: