Chart js shows old data on mouse hover

问题:

How can I fix chart js bug like it shows old data when I move the mouse on the chart.

My Js file

   $('#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
                              }
                            }
            });
          } 
   })

 })

I can able to display data from JSON response in chart js but the problem with it shows previous values when I just move the mouse on the chart.

I have tried destroy method but it did not work.How to prevent this problem??.

Is there any way to fix this error.Can any one help on this, please.

回答1:

First off, why are you creating two same type of chart, with same data? There is no need!

You indeed need to use destroy method, but the reason it­'s not working is because, you haven't declared the chart variable in global scope. In order to destroy any instance of chart, the chart instance must be available in global scope (meaning, the chart variable should be globally accessible).

So, in your case, you should define the chart variable as :

myChart = new Chart(...);

or,

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

also, you need to destroy the previous instance of chart, before creating a new one, as such :

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

回答2:

Above solution worked for me but when I have two charts on the same page, Only one is showing. Other charts are becoming empty. Here is the solution for that.

  var ctx = document.getElementById("bar-chart").getContext("2d");  

  //Destroy the previous chart;
  //Rename the "bar" according to your component
  if(window.bar != undefined)
  window.bar.destroy();
  window.bar = new Chart(ctx , {});

if you don't change the "bar", only one chart will show in your page.