Angular Chartjs图表不加载取决于我使用的方法

我正在angular中使用Chartjs在我的页面上绘制几个图表；一个折线图，两个条形图，一个饼图和两个甜甜圈

在互联网上进行编码和寻求帮助时，我提供了两种加载/编码图表的方法。这两种方法都给我带来了一个巨大的问题，每种方法都有它自己的问题，我无法找到任何一种方法的解决方案

让我们以油炸圈饼图为例

我可以使用的第一种方法是：

HTML

<canvas id="myDonut"></canvas>

<canvas id="myLine" class="chart chart-line" chart-data="lineChart.data" chart-labels="lineChart.labels" chart-colors="lineColors" chart-options="lineChart.options" chart-series="lineChart.series" ></canvas>

这是我可以使用的第二种方法

HTML

<canvas id="myDonut"></canvas>

<canvas id="myLine" class="chart chart-line" chart-data="lineChart.data" chart-labels="lineChart.labels" chart-colors="lineColors" chart-options="lineChart.options" chart-series="lineChart.series" ></canvas>

嗯。两种方法都“有效”。我的意思是，他们在正确的图表上绘制正确的数据。。。但让我抓狂的是：

• first方法从不在页面的第一次加载时加载图形。如果我关闭浏览器并重新打开页面，图表将无法加载。没有错误抛出。它只是不显示。如果我F5，它加载，没有任何问题，一切都很酷

• 第二个方法从一开始就按它应该做的那样加载，但我不能。在需要时销毁（）它（以擦除其中的数据），因为我没有像第一个方法（$scope.myDoughnutChart）那样为图表分配变量，在第一次加载时它不会加载，但我可以。destroy（）我想什么时候看图表都行

我需要从一开始就加载图形并能够销毁它。

请帮忙

编辑

auxDonutData以以下方式填充数据：

在第一次加载控制器时，我调用一个从数据库获取数据的函数，并调用另外四个函数。第一个计算一些东西并将其存储在变量$scope.year\u overview中，其他三个按顺序初始化3个图形，一个折线图、一个条形图和一个圆环图

初始化甜甜圈图表的函数如下所示：

var auxDonutData = [];

      if($scope.times_fees_filter == "times")
      {
        if(timesIncomeFilter == "hours")
        {
          auxDonutData = [$scope.year_overview.times.hours.rendered.total,$scope.year_overview.times.hours.pending.total,$scope.year_overview.times.hours.write_off.total];

        }
        else
        {
          auxDonutData = [$scope.year_overview.times.income.rendered.total,$scope.year_overview.times.income.pending.total,$scope.year_overview.times.income.write_off.total];

        }
      }

var ctx = document.getElementById("myDonut").getContext("2d");
 $scope.myDoughnutChart = new Chart(ctx, {, 
    type: 'doughnut',
    data: {
      labels: ["Billed hours","Pending hours","Write off"],
      datasets: [
        {
          backgroundColor: ['#a2f5a6','#FFFF99','#ffb2b2'],
          data: auxDonutData
        }
      ]
    }

如您所见，我只是先填写变量auxDonutData，然后创建图形

编辑

我发现，在第一种方法中，如果我在变量$scope.myDoughnutChart中插入intermediate.destroy（），它会抛出一个错误“TypeError:无法读取未定义的属性'destroy'

---

所以。。。它没有被初始化？这就是为什么第一次加载时图形不显示的原因？

您可以添加代码来显示如何填充

auxDonutData

？当然可以，我会编辑帖子