グラフjsはマウスのホバー上の古いデータを表示します

Question

グラフ上でマウスを動かすと古いデータを表示するようにチャートjsのバグを修正する方法を教えてください。

私のJSファイル

$('#select-question').change(function(){ 
    var questionId = $("option:selected",this).val(); 
    $.ajax({ 
      type : "GET", 
      dataType:"JSON", 
      url : '/get-percentage', 
      data : 
       { 
        'questionId' : questionId 
       }, 
       success: function(data) 
       { 

        console.log(data) 
        if(data == '') 
        { 
         alert('No Data') 
        } 
        var option = []; 
        var label = []; 
        for(var i=0;i < data.example.length; i++) 
        { 
        option.push(data.example[i]); 
        label.push(data.labels[i]); 

       } 

       var chartdata = { 
       labels: label, 
       datasets : [ 
       { 
         label: 'FeedBack Report Graph', 
         backgroundColor: [ 
          'rgba(255, 99, 132, 0.2)', 
          'rgba(54, 162, 235, 0.2)', 
          'rgba(255, 206, 86, 0.2)', 
          'rgba(75, 192, 192, 0.2)', 
          'rgba(153, 102, 255, 0.2)', 
          'rgba(255, 159, 64, 0.2)' 
         ], 
         borderColor: [ 
          'rgba(255,99,132,1)', 
          'rgba(54, 162, 235, 1)', 
          'rgba(255, 206, 86, 1)', 
          'rgba(75, 192, 192, 1)', 
          'rgba(153, 102, 255, 1)', 
          'rgba(255, 159, 64, 1)' 
         ], 
         hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
         hoverBorderColor: 'rgba(200, 200, 200, 1)', 
         data: option 
         } 
         ] 
      }; 

     var ctx = $("#mycanvas"); 
       var myChart = new Chart(ctx, { type: 'pie', data: chartdata, options:{ 
            legend: { 
            display: true 
           } 
          } }); 
       myChart.destroy();  

     var barGraph = new Chart(ctx, { 
          type: 'pie', 
          data: chartdata, 
          options: { 
            legend: { 
            display: true 
           } 
          } 
      }); 
      } 
    }) 

}) 

私はチャートJSでJSONレスポンスからのデータを表示することができことができますが、私はただ、チャート上でマウスを動かすと、それに伴う問題は、以前の値を示しています。

私は方法を破壊しようとしましたが、動作しませんでした。この問題を防ぐ方法はありますか？

このエラーを修正する方法はありますか。これについては、いずれかのヘルプをお願いします。

Answer 1

まず、同じデータを持つ2つの同じタイプのチャートを作成していますか？必要はありません！

実際にdestroyメソッドを使用する必要がありますが、のが機能しない理由は、グローバル変数でグラフ変数を宣言していないためです。グラフインスタンスを破棄するには、グラフインスタンスをグローバルスコープで使用できるようにする必要があります（つまり、グラフ変数はグローバルにアクセス可能である必要があります）。

だから、あなたのケースでは、あなたのようにグラフの変数を定義する必要があります。

myChart = new Chart(...); 

または、

window.myChart = new Chart(...); 

また、あなたは新しいを作成する前に、グラフの以前のインスタンスを破壊する必要があります1つのように：

... 
if (myChart) myChart.destroy(); 
myChart = new Chart(...); 
...