如何克隆和重繪谷歌圖表在另一個div？

Question

我很難弄清楚如何做到這一點，因爲我不熟悉谷歌圖表。

我正在使用pivotTable.js和一切工作正常，但我想「保存」或有一個按鈕，其中當前創建的圖表將被克隆到另一個div。

我做了一個全局變量

var wrapper; 

這對保存圖表

wrapper = new google.visualization.ChartWrapper({ 
     dataTable: dataTable, 
     chartType: chartType, 
     options: options 
    }); 
    wrapper.draw(result[0]); 

在此之後，當按鈕被點擊的包裝圖，應在另一格重繪。

<div id="trial" style="margin: 30px;"></div> 

我試圖做到這一點，但我股票如何將圖表放入審判分區。

// Never called. 
     google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler); 


     google.visualization.events.addListener(wrapper, 'ready', onReady); 


     // Never called 
     function uselessHandler() { 
     alert("I am never called!"); 
     } 

     function onReady() { 
     google.visualization.events.addListener(wrapper.getChart(), 'click', usefulHandler); 
     } 

     // Called 
     function usefulHandler() { 
     alert(wrapper.getChart()); 
     } 

解決：

function getChart() { 
    google.visualization.events.addListener(wrapper, 'ready', onReady); 
     function onReady() { 
     google.visualization.events.addListener(wrapper.getChart(), 'click', usefulHandler); 
     } 
    var trialChart = wrapper.clone(); 
    trialChart.setContainerId('trial'); 
    trialChart.draw(); 
} 

Answer 1

後clone() - 只需要設置新containerId

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', '2015'); 
 
    data.addColumn('number', '2016'); 
 
    data.addRows([ 
 
     [new Date('01/01/2016'), 200, 210], 
 
     [new Date('01/02/2016'), 190, 220], 
 
     [new Date('01/03/2016'), 205, 200], 
 
     [new Date('01/04/2016'), 220, 230], 
 
     [new Date('01/05/2016'), 212, 210], 
 
     [new Date('01/06/2016'), 185, 193], 
 
     [new Date('01/07/2016'), 196, 207] 
 
    ]); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'LineChart', 
 
     containerId: 'chart_orig', 
 
     dataTable: data, 
 
     options: { 
 
     height: 400 
 
     } 
 
    }); 
 

 
    google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
 
     document.getElementById('cloneBtn').addEventListener('click', function() { 
 
     var trialChart = chart.clone(); 
 
     trialChart.setContainerId('chart_trial'); 
 
     trialChart.draw(); 
 
     }, false); 
 
    }); 
 

 
    chart.draw(); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<input type="button" id="cloneBtn" value="Clone" /> 
 
<div>Original Chart</div> 
 
<div id="chart_orig"></div> 
 
<div>Trial Chart</div> 
 
<div id="chart_trial"></div>