如何克隆和重绘谷歌图表在另一个div？ [英] how to clone and re draw google chart in another div?

问题描述

我正在使用pivotTable.js以及所有的东西，所以我不知道如何做到这一点，因为我不熟悉谷歌图表。工作正常，但我想保存或有一个按钮，其中当前创建的图表将克隆到另一个div。

我做了一个全局变量

  var wrapper; 
  

保存图表

<$ p $ （
dataTable：dataTable，
chartType：chartType，
options：options
}）;
wrapper.draw（result [0]）;

之后，当按钮被点击时，包装图表应该在另一个div中重绘。 p>

 < div id =trialstyle =margin：30px;>< / div> 
  

我尝试过这样做，但是我将如何将图表放入试用版。

  //从来没有打过电话。 
 google.visualization.events.addListener（wrapper，'onmouseover'，uselessHandler）; 
 
 
 google.visualization.events.addListener（wrapper，'ready'，onReady）; 
 
 
 //从来没有调用过
函数uselessHandler（）{
 alert（我从未被调用过！）; 
} 
 
函数onReady（）{
 google.visualization.events.addListener（wrapper.getChart（），'click'，usefulHandler）; 
} 
 
 //被称为
函数usefulHandler（）{
 alert（wrapper.getChart（））; 
} 
  

已解决：

  function getChart（）{
 google.visualization.events.addListener（wrapper，'ready'，onReady）; 
函数onReady（）{
 google.visualization.events.addListener（wrapper.getChart（），'click'，usefulHandler）; 
} 
 var trialChart = wrapper.clone（）; 
 trialChart.setContainerId（'trial'）; 
 trialChart.draw（）; 
 
  

解决方案

after clone（） - 只需要设置新的 containerId

工作片段...
$ b

google.charts.load（'current'， {callback：function（）{var data = new google.visualization.DataTable（）; data.addColumn（'date'，'Date'）; data.addColumn（'number'，'2015'）; data.addColumn（'数字'，'2016'）; data.addRows（[[新日期（'01 / 01/2016'），200,210]，[新日期（'01 / 02/2016'），190,220]新日期（'01 / 03/2016'），205,200]，[新日期（'01 / 04/2016'），220,230]，[新日期（'01/05/2016' 210]，[新日期（'01 / 06/2016'），185,193]，[新日期（'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（图表'ready'，function（）{document.getElementById（'cloneBtn'）。addEventListener（'click'，function（）{var trialChart = chart.clone（）; trialChart.setContainerId 'chart_trial'）; trialChart.draw（）;}，false）;}）; chart.draw（）; }，packages：['corechart']}）;

I am having a hard time to figure out how to do this, since i am not that familiar with google chart.

I am using pivotTable.js and everything is working okay, but i want to "save" or have a button where the current created chart will be cloned to another div.

I made a global variable

var wrapper;

this to save the chart

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

After this, when the button is clicked the wrapper chart, should be redrawn in another div.

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

I tried to do this but i am stock with how will i put the chart into the 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());
      }

SOLVED:

   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();
}

解决方案

after clone() -- just need to set the new containerId

see following working snippet...

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>

这篇关于如何克隆和重绘谷歌图表在另一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！