我试图弄清楚 chartjs 的 destroy 方法，但它工作得不太好。我使用虚拟按钮对虚拟数据执行此操作，但这就是我所拥有的。

用于测试的非常简单的 html 标记：

<div class="container mt-5">
      <div class="row">
            <canvas id="myChart"></canvas>
        </div>
        <div class="row mt-5">
            <button class="btn btn-primary" id="chartBTN">Next Chart</button>
        </div>
</div>

以下是简单的 js。重点是加载时生成图表，然后，单击按钮时，图表会向其中添加另一个数据集以供比较。为此，我知道我必须销毁第一个图表才能重新创建第二个图表。测试按钮单击有效，但图表销毁不起作用。相反，我收到一个错误。

我是否将 destroy 方法放在了错误的位置？

// Our labels along the x-axis
var years = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
// For drawing the lines
var africa = [86,114,106,106,107,111,133,221,783,2478];
var asia = [282,350,411,502,635,809,947,1402,3700,5267];
var europe = [168,170,178,190,203,276,408,547,675,734];
var latinAmerica = [40,20,10,16,24,38,74,167,508,784];
var northAmerica = [6,3,2,2,7,26,82,172,312,433];

var ctx = $("#myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: years,
    datasets: [
      { 
        data: africa
      }
    ]
  }
});

$('#chartBTN').on('click', function(){


    myChart.destroy();

    var ctx = $("#myChart");

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: years,
            datasets: [
                { 
                    data: africa,
                    label: 'Africa',
                    borderColor: "#3e95cd",
                    fill: false
                },
                { 
                    data: asia,
                    label: "Asia",
                    borderColor: "#3e95cd",
                    fill: false
                }
            ]
        }
    });

});