Question

我正在使用Chartjs来在页面上绘制多个图表；折线图，两个条形图，一个饼图和两个甜甜圈。

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

让我们以甜甜圈图为例。

我可以使用第一种方法使它起作用：

HTML

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

控制器

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

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

HTML

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

控制器

I just fill the variable lineChart with data and voilà. Really really easy.

好。两种方法都“起作用”。我的意思是，他们在正确的图形上绘制了正确的数据……但是，这就是让我发疯的原因：

第一方法从不将图形加载到页面的第一次加载中。如果我关闭浏览器并重新打开页面，则该图表将不会加载。没有抛出任何错误。它只是不会显示。如果我按F5键，它将加载，一点问题都没有，一切都很酷。
第二种方法从一开始就加载，但它应该这样做，但是当我需要这样做（以擦除其上的数据）时，我无法对其进行.destroy（）处理。没有像第一种方法（$ scope.myDoughnutChart）那样为图表分配变量，该变量不会在第一次加载时加载，但是我可以随时根据需要对图形进行.destroy（）。

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

请帮助。

编辑

auxDonutData通过以下方式填充数据：

在第一次加载控制器时，我调用一个从数据库获取数据的函数，并调用另外四个函数。第一个计算一些东西并将其存储在变量 $ scope.year_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进行.destroy（），它将引发错误“ TypeError：无法读取未定义的属性'destroy'”。

所以...它没有被初始化吗？这就是为什么图表在首次加载时不显示的原因？

根据我使用的方法，无法加载Chartjs图表

0 个答案: