如何停止Chart.js在上一张图表上的渲染

Question

我整理了一些代码，使我可以查询MySQL数据库，返回结果并填充chart.js。问题在于，每次AJAX代码运行图表时，都会在前一个图表上进行渲染。我通读了一些类似的stackoverflow查询，这些查询建议使用myChart.destroy();或其他解决方案，但我一直在努力找出应将其插入以下代码中的位置。

请注意，为简化起见，我简化了以下代码。

我们将非常感谢您提供任何有关如何停止此图表“重影”的帮助。

<script type="text/javascript">
jQuery(document).ready( function($) {
    var valueCheck;
    jQuery('#afl_player_year').on( 'change', function () {
         afl_player_year = $('#afl_player_year').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        dataType: "json", 
        data: {
            action: 'call_player_chart_data',
            afl_player_year: afl_player_year,
        },
         success:function(output){
             var y_data1 = output[0];
             var y_data2 = output[1];
             var x_time  = ............
new Chart(document.getElementById("myChart"), {
   type: 'bar',
    data: {
      labels: x_time,
      datasets: [{.........
      }, {.........
      }]
    },
    options: {
      scales: {.........
       yAxes: [{.........},{.........},
        }]
      }
    }
});
         }
     });
    }).change();
});
</script>