Question

我现在正在使用Highcharts.js plugin但是当我测试我的字符时，我发现如果调用我的绘制图表功能两次，我得到的结果是我预期的两个时间，所以现在我想clear图表内容或重新初始化或销毁或者其他什么再次调用它，但我不知道该怎么做，在这里搜索我找到的解决方案：

myChar.destroy();

但是在这种情况下myChar是一个变量，他们放置所有图表选项，我的问题是我在一个函数中执行此操作，所以我该怎么做才能创建一个重置函数，例如，这里是我的代码和我尝试的内容：

＆＃13;

$(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]
    }]
  });
}

＆＃13;

<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>

＆＃13;

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

Answer 1

您需要销毁Highchart的实例。

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

Updated Fiddle

Answer 2

在按钮2事件中添加以下代码：

$('#Chart').highcharts().destroy();

清除/重新初始化Highchart

2 个答案: