Question

我使用Chart.js绘制图表。这是我的代码的结构：

<div id="graph_slider">
    <div class="row">
        <div id="first_container" class="col-md-6">
            <canvas id="my_graph"></canvas>
        </div>
        <div id="second_container" class="col-md-6"></div>
    </div>
</div>
<button type="button" id="clone">Clone graph</button>

<script>
    var ctx = document.getElementById('my_graph').getContext('2d');

    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{data: [10, 20, 30]}]
        }
    });

    $("#clone").click(function(){
       //clone the graph... 
    });
</script>

我想做的是＆＃34;克隆＆＃34;图#my_graph并将其附加到div #second_container，以便在单击按钮#clone时，我可以并排显示完全相同的图形。

有人知道怎么做吗？

Answer 1

获取第一个div的html内容并将其设置为第二个：

$("#clone").click(function(){
   var content=$("#first_container").html();
   $("#second_container").html(content);
});

或使用clone：

$("#clone").click(function(){
   $("#first_container").clone().appendTo("#second_container");
});

如果要将画布直接复制到新画布（而不是其父级内容）:( Thanks to this）

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //Clone the new canvas to desired place
    newCanvas.clone().appendTo("#second_container");

}

Answer 2

我花了一段时间解决了这个问题。解决方案是创建另一个图表，该图表具有与我们要克隆的图表相同的属性。而且我们知道，要创建图表，应同时包含上下文和配置上下文是画布中的ID，配置将保存类型，数据，选项对象。

所以我的方法是创建一个函数，该函数将获取所需的图表作为输入。类似于以下内容（代码段）：

var dynamic_chart; 
var ctx; 

   // pass the chart that we want to clone as an object 

   function myDynamicChart(chart){

   //destroy the previous chart in the canvas to avoid any overlapping 

     if(dynamic_chart != null)
       dynamic_chart.destroy();

   //set the context jquery..
     ctx = $('#myBarChart3');

   //or set the conext by html which will be ctx= document.getElementById("myBarChart3");

   //instantiate the chart 
     dynamic_chart = new Chart(ctx,{
     type: chart.config.type,
     data: chart.config.data, 
     options:chart.config.options
   });



   }

Chart.js - 将图形克隆到另一个位置

2 个答案: