图表js显示鼠标悬停的旧数据 [英] Chart js shows old data on mouse hover

问题描述

当我在图表上移动鼠标时，如何修复图表js bug，就像它显示旧数据一样。

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

我的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响应的数据，但是当我在图表上移动鼠标时，它的问题显示了以前的值。

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.

推荐答案

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

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

你确实需要使用destroy方法，但的无法正常工作的原因是因为你没有在全局范围内声明了图表变量。为了销毁图表的任何实例，图表实例必须在全局范围内可用（意味着图表变量应该是全局可访问的）。

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(...);

或，

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(...);
...

这篇关于图表js显示鼠标悬停的旧数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！