javascript - 清除/重新初始化Highchart

我现在正在使用Highcharts.js plugin一切正常，但是在测试我的char时，我发现如果两次调用绘图图函数，我会得到两次期望的结果，所以现在我想使用clear图表内容，或者重新初始化或销毁，或者在再次调用之前执行任何操作，但是我不知道该怎么办，在这里搜索解决方案后发现：

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

最佳答案

您需要销毁Highchart实例。

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

Updated Fiddle

关于javascript - 清除/重新初始化Highchart，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40360869/