更新reactjs中的chartsjs图表

Question

我有一张包含一些数据的图表。当我点击按钮时，数据应该更改+图表。它可以工作但是......当你将鼠标悬停在图表上时，带有第一个数据的图形会闪烁一些。我不明白为什么。

示例： https://codesandbox.io/s/zx6o9wj654

Answer 1

这是因为，每次点击提交按钮时，您都在创建一个新的图表实例。

为了使其正常工作，您需要destroy之前的图表实例，然后再创建一个新的图表实例，如下所示：

...
createData = () => {
      // destroy previous chart instance, if exists
      if (this.myChart) this.myChart.destroy();
      /** create new chart instance **/
      const ctx = document.getElementById("myChart");
      // store chart instance to a class property
      this.myChart = new Chart(ctx, {
         ...

这是working example。