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

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

事实上，你需要使用毁灭的方法，但它的原因的不工作是因为你还没有宣布在全球范围内的图表变量。为了销毁图表的任何实例，图表实例必须在全局范围内可用（意味着，图表变量应可全局访问）。

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

myChart = new Chart(...);

要么，

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

同样，您需要在创建新图表之前销毁图表的先前实例，例如：

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