过滤值列表时，Angular ASP.NET Core Chart.js在图表重建时出错

Question

我有以下错误：TypeError：无法读取属性＆＃39; skip＆＃39;未定义的。

我有一种在我的应用中构建图表的方法。那就是OnInit

var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx);
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels :this.equity,
    datasets: [{
      data: this.equity
    }]
  }
});

}

this.equity是我在客户端使用来自服务器的数据计算的值数组。这是我稍后过滤的列表。

一切顺利建立，直到我开始过滤。该图表基于列表中的值构建。我编写了一个过滤器，用各种选项过滤列表。在每次过滤结束时，我再次调用上面的方法来重建图表。

现在，奇怪的事情开始发生了。图表顺利重建。我使用不同的选项多次过滤，然后在某些时候繁荣我得到这个错误！当我按下过滤器时，它不会发生在某个特定时刻，它就会发生。

我认为这是因为我每次创建一个新的图表对象并为其提供新值。值的变量与旧对象的变量相同，这会导致错误，因为在某些时候Angular会检出旧对象，并且它已经有一个与旧列表不匹配的新值列表。 / p>

这对任何人都有用吗？现在有人如何在创建新图表对象时将旧图表对象归零，以便这可能解决？谢谢！

Answer 1

尝试使用destroy()方法在创建新图表实例之前销毁旧图表实例。

...
if (myChart) myChart.destroy();
myChart = new Chart(ctx, {
         type: 'line',
         ...
...

^{确保myChart变量可全局访问}

但是，更好的方法是在图表中添加/更新任何数据时使用update()方法更新图表，而不是每次都创建新的图表实例。