图表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

使用Javascript，我们可以清空div的包含，并再次追加画布

document.getElementById('pieChartContainer').innerHTML = "";
  document.getElementById('pieChartContainer').innerHTML = <canvas #pieCanvas style="height:40vh; width:80vw" id="pieCanvas"></canvas>;

Answer 2

上面的解决方案对我有效，但当我在同一页上有两个图表时，只显示一个。其他图表正在变空。这是解决这个问题的办法。

  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 , {});

如果不更改“条形图”，页面中只会显示一个图表。

Answer 3

首先，为什么要用相同的数据创建两个相同类型的图表？没有必要！

您确实需要使用销毁方法，但它不起作用的原因是，您没有在全局范围内声明图表变量。为了销毁图表的任何实例，图表实例必须在全局范围内可用（意思是，图表变量应该是全局可访问的）。

因此，在您的情况下，您应该将图表变量定义为：

myChart = new Chart(...);

或

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

此外，在创建新实例之前，还需要销毁以前的chart实例，例如：

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