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です。