在运行时将Google Chart容器更改为另一个容器

Question

喜欢这个答案：

how to clone and re draw google chart in another div?

但是，我不想克隆图表本身，而是在运行时将他移动到另一个div。

Answer 1

这里有一些选择...

1）如果使用ChartWrapper类，
只需使用setContainerId更改div id 然后重绘图表

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0, 0],
    [3, 3],
    [6, 6]
  ]);

  var chartWrapper = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart-left',
    dataTable: data,
    options: {
      backgroundColor: 'transparent',
      theme: 'maximized'
    }
  });
  chartWrapper.draw();

  document.getElementById('switch').addEventListener('click', function () {
    var containerId = (chartWrapper.getContainerId() === 'chart-left') ? 'chart-right' : 'chart-left';
    chartWrapper.setContainerId(containerId);
    chartWrapper.draw();
  }, false);
}

.chart {
  display: inline-block;
  height: 160px;
  width: 160px;
  vertical-align: top;
}

.chart:first-child {
  background: cyan;
}

.chart:last-child {
  background: yellow;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <input id="switch" type="button" value="Switch"/>
</div>
<div>
  <div class="chart" id="chart-left"></div>
  <div class="chart" id="chart-right"></div>
</div>

2）如果使用标准图表类，例如LineChart，
您需要使用新容器重新创建图表，
然后画出

您必须清除上一张图表 你可以使用图表方法 - ＆gt; clearChart
或者只是清除div - ＆gt; div.innerHTML = ''

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0, 0],
    [3, 3],
    [6, 6]
  ]);

  var container = '';
  document.getElementById('switch').addEventListener('click', drawChart, false);
  drawChart();

  function drawChart() {
    if (container !== '') {
      document.getElementById(container).innerHTML = '';
    }
    container = (container === 'chart-left') ? 'chart-right' : 'chart-left';
    var chart = new google.visualization.ComboChart(
      document.getElementById(container)
    );
    chart.draw(data, {
      backgroundColor: 'transparent',
      theme: 'maximized'
    });
  }
}

.chart {
  display: inline-block;
  height: 160px;
  width: 160px;
  vertical-align: top;
}

.chart:first-child {
  background: cyan;
}

.chart:last-child {
  background: yellow;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <input id="switch" type="button" value="Switch"/>
</div>
<div>
  <div class="chart" id="chart-left"></div>
  <div class="chart" id="chart-right"></div>
</div>

3）你也可以使用静态方法 - ＆gt; google.visualization.drawChart

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0, 0],
    [3, 3],
    [6, 6]
  ]);

  var container = '';
  document.getElementById('switch').addEventListener('click', drawChart, false);
  drawChart();

  function drawChart() {
    if (container !== '') {
      document.getElementById(container).innerHTML = '';
    }
    container = (container === 'chart-left') ? 'chart-right' : 'chart-left';
    google.visualization.drawChart({
      containerId: container,
      dataTable: data,
      chartType: 'LineChart',
      options: {
        backgroundColor: 'transparent',
        theme: 'maximized'
      }
    });
  }
}

.chart {
  display: inline-block;
  height: 160px;
  width: 160px;
  vertical-align: top;
}

.chart:first-child {
  background: cyan;
}

.chart:last-child {
  background: yellow;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <input id="switch" type="button" value="Switch"/>
</div>
<div>
  <div class="chart" id="chart-left"></div>
  <div class="chart" id="chart-right"></div>
</div>