学习Chartjs .destroy()

Question

我想找出chartjs的销毁方法，但效果不太好。我用一个虚拟按钮在虚拟数据上做这件事，但这是我有的。

用于测试的非常简单的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。重点是在加载时生成一个图表，然后单击按钮，将另一个数据集添加到该图表中进行比较。要做到这一点，我知道我必须摧毁第一张图表来重建第二张。测试按钮点击工作，但图表破坏没有任何作用。相反，我得到了一个错误。

​

​

我是不是把破坏方法放错地方了？

// 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声明，它应该可以正常工作。(因为该变量已在该函数的作用域中定义。