javascript - 清除/重新初始化 Highchart

Question

目前我正在使用 Highcharts.js 插件，一切正常，但是当我测试我的字符时，我发现如果调用我的绘制图表函数两次，我会得到我期望的结果两次次，所以现在我想在再次调用之前清除图表内容或重新初始化或销毁或其他任何东西但我不知道到底该怎么做，在这里搜索解决方案我发现了这个:

myChar.destroy();

但在这种情况下，myChar 是一个变量，他们将所有图表选项放在其中，而我的问题是我在一个函数中执行此操作，所以我可以做些什么来创建一个重置函数，例如，这是我的代码和我尝试过的:

$(document).ready(function() {
  $('#bt').click(function() {
    chart();
  });
  $('#bt2').click(function() {
    $('#MyDiv').html("");
  });
});

function chart() {

  $('#Chart').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Inspeccion Dimensional'
    },
    xAxis: {
      categories: ['Pieza 1', 'Pieza 2', 'Pieza 3', 'Pieza 4', 'Pieza 5']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Resultados'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },


    series: [{
      name: 'Thickness',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Width',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Length',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Diameter',
      data: [3, 4, 4, 2, 5]
    }]
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<button id="bt">
  Draw
</button>

<button id="bt2">
  Clear
</button>

<div id="MyDiv">
  <div id="Chart">
  </div>
</div>

如果您看到我的代码，我尝试使用 $('#MyDiv').html("") 解决此问题，但如果我这样做，我将无法绘制我的再次图表。 Fiddle with working code

Answer 1

您需要销毁 Highchart 的实例。

$('#bt2').click(function () {
    $('#Chart').highcharts().destroy();
 });

Updated Fiddle