如何在jquery clone中启用highchart动画？

1mrurvl1 于 12个月前发布在 jQuery

关注(0)|答案(2)|浏览(201)

我正在使用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);
    });
});

字符串

jquery

来源：https://stackoverflow.com/questions/77569356/how-to-enable-highchart-animation-in-jquery-clone

2条答案

按热度按时间

6jjcrrmo1#

您可以使用第一个图表中的用户选项创建第二个图表。例如：

$('#button2').click(function() {
    var options = $('#container').highcharts().userOptions;
    $("#copyto").highcharts(options);
  });

字符串

现场演示：https://jsfiddle.net/BlackLabel/qheuLb1k/

赞(0）回复(0）举报 12个月前

4bbkushb2#

克隆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
    }
  });
}

个字符

**注意：**如果您希望 Set new data 按钮适用于所有图表div，请执行以下操作：https://jsfiddle.net/kaz6cfp1/

根据讨论，你可以这样做：https://jsfiddle.net/mws5pug1/

赞(0）回复(0）举报 12个月前

我来回答

如何在jquery clone中启用highchart动画？

2条答案

相关问题

热门标签

最新问答