如何在jQuery克隆的Highcharts图表中启用动画效果？

使用Highcharts创建的图表，原本鼠标悬停显示数值的功能正常，但通过jQuery克隆图表后，交互动画（悬停提示）消失了。

原因分析 #

jQuery的clone()方法仅复制DOM结构，不会同步Highcharts绑定的事件监听、图表实例对象以及交互逻辑。克隆后的DOM只是静态的渲染结果，没有关联任何Highcharts的运行时实例，自然无法触发悬停等交互效果。

解决方案 #

不要直接克隆已初始化的图表DOM，而是复制原图表的配置参数，在新容器中重新创建一个完整的Highcharts实例，这样就能保留所有交互功能。

修改后的代码如下：

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

<script>
$(function () {
    // 初始化原图表并获取实例
    var originalChart = $('#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]
        }]
    }).highcharts();

    // 更新数据按钮逻辑
    $('#button').click(function() {
        originalChart.series[0].remove();
        originalChart.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 $newWrapper = $('<div id="clonewrapper"><div id="clonecontainer" style="height: 400px"></div></div>');
        $("#copyto").append($newWrapper);
        
        // 深拷贝原图表配置，避免引用关联
        var chartOptions = JSON.parse(JSON.stringify(originalChart.options));
        // 在新容器中初始化完整图表
        $('#clonecontainer').highcharts(chartOptions);
    });
});
</script>

关键说明 #

1. 获取原图表实例：通过highcharts()方法获取已初始化的图表实例，方便后续获取配置和更新数据。
2. 深拷贝配置：使用JSON.parse(JSON.stringify())深拷贝原图表的配置对象，避免新图表和原图表共享同一引用导致后续数据更新相互影响。
3. 全新容器初始化：不直接克隆旧DOM，而是创建全新的容器，用拷贝的配置重新初始化Highcharts，确保新图表拥有完整的交互逻辑。

内容的提问来源于stack exchange，提问作者user6625547