Question

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

我的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

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

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

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

myChart = new Chart(...);

，或者

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

另外，您需要在创建新图表之前销毁之前的图表实例，如下所示：

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

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

最好的方法是清空div并通过JavaScript函数附加画布。它将帮助您重新绘制更新的数据

$('#DetailedGraphMain').empty().append('<canvas id="DetailedGraphMainChart" height="300"></canvas>');

Answer 4

使用javascript，我们可以清空div的容器并再次附加画布

document.getElementById（'pieChartContainer'）。innerHTML =“”; document.getElementById（'pieChartContainer'）。innerHTML = <canvas #pieCanvas style="height:40vh; width:80vw" id="pieCanvas"></canvas>;

图表js显示鼠标悬停的旧数据

4 个答案: