学习Chartjs .destroy（）

Question

我试图找出图表＆＃39;破坏方法，它的工作不正常。我使用虚拟按钮在虚拟数据上执行此操作，但这就是我所拥有的。

用于测试的非常简单的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声明，它应该可以正常工作。 （因为变量已经在该函数的范围内定义。