Chart.js - 別の場所にグラフを複製する

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> 

は、「クローン」であり、グラフ#my_graphと私は正確に同じグラフサイド・バイを持つことができるように、divの#second_containerに追加します：ここに は、私のコードの構造であり、ボタンをクリックすると、#cloneボタンが表示されます。

誰かがこれを行う方法を知っていますか？

Answer 1

最初のdivのHTMLコンテンツを取得し、二番目に設定します。

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

またはクローンを使用して：

$("#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"); 

}