javascript - 在运行时将 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，
您将需要使用新容器重新创建图表，
然后画

您必须清除之前的图表
您可以使用图表方法 --> clearChart
或者直接清除 div --> 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) 你也可以使用静态方法 --> 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>