wie klonen und go google chart in einem anderen div zeichnen?

Question

Ich habe eine harte Zeit, um herauszufinden, wie dies zu tun ist, da ich Google Diagramm nicht so vertraut bin.

Ich benutze pivotTable.js und alles funktioniert in Ordnung, aber ich möchte "speichern" oder eine Schaltfläche haben, wo das aktuell erstellte Diagramm zu einem anderen div geklont wird.

Ich habe eine globale Variable

var wrapper; 

dies das Diagramm

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

Danach, zu speichern, wenn die Taste, um die Wrapper-Chart geklickt wird, sollte in einem anderen div neu gezeichnet werden.

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

Ich habe versucht, dies zu tun, aber ich bin Lager mit, wie werde ich das Diagramm in die Trial 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()); 
     } 

GELÖST:

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

nach clone() - setzen müssen nur die neuen containerId

folgenden Arbeits Schnipsel sehen ...

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>