如何在jquery克隆中启用highchart动画？

Question

我正在使用 highchart 创建图表。如果我将鼠标移到图表上，它会显示值。这很好用。

如果我使用 jquery 克隆图表，则不再有动画。你可以在这个fiddle中看到它。

这是我的代码：

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="wrapper">
<div id="container" style="height: 400px"></div>
</div>

<div id="copyto">
</div>

<button id="button">Set new data</button>
<button id="button2">Copy</button>


$(function () {
    $('#container').highcharts({
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });


    // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.series[0].remove();
        chart.addSeries({data:[229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]} );
       
    });
    
    $('#button2').click(function() {
          var $myclone = $("#wrapper").clone().prop("id", "clonewrapper");
            $("#copyto").append($myclone);
    });
});

Answer 1

克隆 div 后，您需要在克隆的 div 上重新启动

highcharts

这是一个可行的解决方案：

$(function() {
  createHightChart('container');
  // the button action
  $('#button').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].remove();
    chart.addSeries({
      data: [229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
    });

  });

  $('#button2').click(function() {
    var $myclone = $("#wrapper").clone().prop("id", "clonewrapper");
    $("#copyto").append($myclone);
    createHightChart('clonewrapper');
  });
});

function createHightChart(elementId) {
  $('#'+elementId).highcharts({
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
    accessibility: {
      enabled: false
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="wrapper">
  <div id="container" style="height: 400px"></div>
</div>

<div id="copyto">
</div>

<button id="button">Set new data</button>
<button id="button2">Copy</button>