gibt es eine Möglichkeit für Google-Diagramme in ein div anzuhängen?

Question

Wenn der Benutzer auf die Schaltfläche klickt, wird ein Diagramm erstellt. Dieser Code klont nur das Hauptdiagramm. Da sich das Hauptdiagramm ändert, kann der Benutzer mehrmals auf das Hauptdiagramm klicken. Zur Zeit wird das vorherige Diagramm gelöscht, wenn erneut auf die Schaltfläche geklickt wird.

Wenn auf eine Schaltfläche geklickt wird, wird die getChart-Funktion aufgerufen und das ursprüngliche Diagramm wird in das Testdiv geklont. Aber da sich das ursprüngliche Diagramm ändern kann, kann der Benutzer mehrere geklonte verschiedene Arten von Diagrammen in das Trial div einfügen.

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

Answer 1

dies sein könnte, was Sie suchen ...

der Klon ist mit dem divVersuch hinzugefügt,
anstatt das Diagramm in der Studie div

ersetzt

, so dass jedes Diagramm gespeichert wird, wenn die Klontaste gedrückt wird

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(); 
 
     var chartDiv = document.getElementById('chart_trial').appendChild(document.createElement('DIV')); 
 
     chartDiv.id = 'div-' + (new Date()).getTime(); 
 
     trialChart.setContainerId(chartDiv.id); 
 
     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>