最佳答案
这里有一些选项...
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>
关于javascript - 在运行时将 Google Chart 容器更改为另一个容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46208864/