Chart.jsの棒グラフ、画像散布に関する奇妙な問題

Question

私はHTMLページに、ユーザーが一部のデータを視覚化できるようにするスタックバーグラフィック（Chart.jsライブラリ付き）を追加しました。これらのデータは、ユーザーの選択に変更、このonclickの機能を有効にJavascriptの機能は次のとおりです。

関数createDataは、（ラベルとデータセット付き）JSONオブジェクトがグラフィックに渡すために作成されます

function aggLav(){ 
    [...] 
    for(i=2; i<src.rows.length-1; i++){ 
     cells[i]=row.insertCell(j); 
     cells[i].onclick = function() {//load graphic 
      dati=createData();     
      makeGrafico(dati, this.innerHTML);     
      var gr=document.getElementById("canvas");    
      if($(gr).is(':hidden')) $(gr).slideToggle(); 
     }; 
} 

（正常に動作します）、機能makeGrafico（）：

function makeGrafico(dati, titolo){ 
var d=getFirstMonday(); 
var mondays=[]; 
var ctx = document.getElementById("canvas").getContext("2d"); 
window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: dati, 
      options: { 
       title:{ 
        display:true, 
        text:titolo//change to name of procedure 
       }, 
       tooltips: { 
        mode: 'label' 
       }, 
       responsive: true, 
       scales: { 
        xAxes: [{ 
         stacked: true, 
        }], 
        yAxes: [{ 
         stacked: true 
        }] 
       } 
      } 
     }); 
    } 

はそれを表示するために、パラメータの名前をとり、前の関数のJSONオブジェクト。

私が最初に1つの手順（onclick機能を備えたセルは、関連性のない産業手順を示しています）をクリックすると、すべてがうまく行き、グラフィックが上にスライドして正しい結果が表示されます。しかし、別の手順をクリックすると、その手順に関連するグラフィックが表示されます：これは真ですが、画像上にマウスを移動するとグラフィックが突然変化し、最初の手順私はクリックした。

一般に、10個の異なる手順をクリックすると、グラフィック上にマウスを置くと、10個のグラフィックがすべて交互に表示されます。私はグラフィックがどこに変わるかを見つけることができれば、ポインタをその位置に置いたままでいつも変わっています。

私は確かにデータ（とグラフィック）を永続的にしたいと思います。最後にクリックした手順に関連しています。

この奇妙な問題を解決するにはどうすればよいですか？何か不足していますか？私はこのライブラリを初めて使う人です。

Answer 1

お気軽にthis postにお問い合わせください。 makeGrafico関数の先頭にキャンバスをクリアする必要があります。

初めて、window.myBar.destroy()を追加してください。それがうまくいかない場合は、キャンバス要素を削除して再度作成することを検討してください。

var $parent = $('#canvas').parent(); 
$('#canvas').remove(); 
$parent.append('<canvas id="canvas"></canvas>');