javascript - 学习 Chartjs .destroy()

Question

我正在尝试找出 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
                }
            ]
        }
    });

});

Answer 1

用var声明的变量被提升到函数的顶部。您在函数中再次声明相同的变量。

因此函数声明被提升到未定义的函数顶部。

因此，myChart.destroy() 未定义。

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

您应该更新实例，而不是实际销毁实例。

myChart.data.datasets = [] //Desired Data
myChart.update();

如果您想销毁实例，您可以从函数内部删除 var 声明，它应该可以正常工作。 (因为变量已经在该函数的范围内定义。