Chartjs条形图在使用ajax时悬停时显示旧数据

Question

我是javascript新手

我有一个使用chart.js创建的条形图。页面加载时一切正常，但当我更改值时，会出现小故障。新数据被引入，但当我将鼠标悬停在上面时，旧数据会显示出来。

 $('#fanbase-overtime-platform').on("change", function() {

$('.global-page-filter-loader').show();
var platform = $(this).val();
var selected_artist = $('#artist-select-list').val();
var requestSimilarArtist = $.ajax({
  url: "{{url('label/artist/compare/overtime/follower')}}",
  method: "POST",
  data: {_token: $('meta[name="csrf-token"]').attr('content'), selected_artist: selected_artist, platform: platform}
});
requestSimilarArtist.done(function( resp ) {
  if(!resp.error) {
    if(resp.result != undefined) {
      var dateArr = [];
      var followerArr = [];
      for (var i = 0; i < resp.result.artists.length; i++) {
        followerArr[i] = [];
        $.each(resp.result.followers[i], function(index, item) {
          if(i == 0) {
            dateArr.push(item.last_date);
          }
          followerArr[i].push(item.follower_value);
        });
      }
      var ctx = $("#fanbase-overtime-line-chart");
      var chartOptions = {
       responsive: true,
       maintainAspectRatio: false,
       legend: {
          position: "bottom"
       },
       hover: {
          mode: "label"
       },
       scales: {
          xAxes: [
             {
                display: true,
                gridLines: {
                   color: "#f3f3f3",
                   drawTicks: false
                },
                scaleLabel: {
                   display: true,
                   labelString: "Month"
                }
             }
          ],
          yAxes: [
             {
                display: true,
                gridLines: {
                   color: "#f3f3f3",
                   drawTicks: false
                },
                scaleLabel: {
                   display: true,
                   labelString: "Value"
                }
             }
          ]
       },
       title: {
          display: true,
          text: "Line Chart - Legend"
       }
      };

      var colors = [
        {
          borderColor: "#e91e63",
          pointBorderColor: "#e91e63"
        },
        {
          borderColor: "#00CCFF",
          pointBorderColor: "#00CCFF"
        },
        {
          borderColor: "#ffc107",
          pointBorderColor: "#ffc107"
        }
      ]
      var arrOfChartData = []
      $.each(resp.result.artists, function(index, item) {
        arrOfChartData.push({
          label: item.name,
          data: followerArr[index],
          fill: false,
          borderColor: colors[index].borderColor,
          pointBorderColor: colors[index].pointBorderColor,
          pointBackgroundColor: "#FFF",
          pointBorderWidth: 2,
          pointHoverBorderWidth: 2,
          pointRadius: 4
        });
      });

      var chartData = {
        labels: dateArr,
        datasets: arrOfChartData
      };
      var config = {
         type: "line",
         options: chartOptions,
         data: chartData
      };
      var lineChart = new Chart(ctx, config);
      lineChart.update();

    }
  }
  $('.global-page-filter-loader').hide();
});


 });

当我更改日期范围并将鼠标悬停在新图表上时，销毁原始数据的最佳方法是什么？非常感谢。

Answer 1

这是我的工作将图表更改为全局窗口（更改声明）喜欢var lineChart到window.line图表

声明前销毁图表

       if (window.lineChart){

             window.lineChart.destroy();  

           }
      window.lineChart = new Chart(ctx, config);

希望有帮助

Answer 2

我有类似的经历。所以我使用这种方式，在绘制新图表之前破坏以前的图表

var canvasContainer = canvasItem.parent();
var canvasHtml = '<canvas id="'+canvasItem.attr('id')+'"><canvas>';
canvasItem.remove();
$(canvasContainer).append(canvasHtml);

…将图表选项设置为

var options = {
    title:{},
    scalses:{}
}

在你写下你想在图表中使用的选项之后

var ctx = document.getElementById(canvasItem.attr('id')).getContext('2d');
var Chart = new window.Chart(ctx, {
        data:{
        labels:chartdata.date,
        datasets:chartdata.datasets,
        },
        options : options
});

它对我很管用