【发布时间】：2014-01-09 14:06:46
【问题描述】：
我创建了一组谷歌仪表，可以从谷歌表格中提取数据。该表有两页，第一页保存最初加载到仪表中的值，第二页包含提供每个仪表更改值的数据。底部的按钮允许仪表在两个值之间来回切换。
我只能使用 chartWrapper 类和 .setDataSourceUrl 方法从谷歌表格中为仪表设置动画。
我想在仪表下方添加一个数据表，但无法同时绘制两个 chartWrapper。我可以画一个或另一个，但不是我已经看过并发现其他有类似问题的人，并尝试了描述的修复，但无济于事。我有唯一的 ID。每个图表我都有一个 div。我调用一个函数，然后调用 OnLoad 分别绘制每个图表的各个函数。我不确定还有什么可以尝试的，在这一点上感觉很像猜测工作。任何帮助将不胜感激。非常感谢您的关注！
我还不关心按钮，我只想让两个图表都在初始加载时绘制。
这是html：
<html>
<head>
<title>
Animated Gauge fed by Sheet
</title>
<!-- One script tag loads all the required libraries! Do not specify any chart types in the autoload statement. -->
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
</script>
<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
//google.setOnLoadCallback(drawVisualization);
//google.setOnLoadCallback(drawTable);
//global variable manipulatedby the following 3 functions.
var wrap = new google.visualization.ChartWrapper();
var myTable = new google.visualization.ChartWrapper();
function drawGauge() {
// Define the chart using setters:
//var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('Gauge');
wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\&gid=0');
wrap.setContainerId('gauge_div');
wrap.setOptions({
'min': 0,
'max': 35,
//greenFrom:0,
//greenTo:10,
'yellowFrom': 15,
'yellowTo': 20,
'redFrom': 20,
'redTo': 30,
'greenColor': 999900,
'yellowColor': '#FFFF99',
'redColor': 660066,
'minorTicks': 10,
'animation':{
'duration': 800,
'easing': 'out'
}
//width of container determines whether gauges show up on same row or multiple rows
//'width':700
});
//alert('hello');
var elem = document.getElementById('gauge_div');
elem.style.opacity = 0.6;
wrap.draw();
}
function drawTable(){
myTable.setChartType('Table');
myTable.setContainerId('table_div');
myTable.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\#gid=0&headers=1');
myTable.setOptions({'width':200});
//alert('hello');
myTable.draw();
}
function changeValues() {
// Define the chart using setters:
//var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('Gauge');
wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=2');
wrap.setContainerId('gauge_div');
wrap.setOptions({
'min': 0,
'max': 35,
//greenFrom:0,
//greenTo:10,
'yellowFrom': 15,
'yellowTo': 20,
'redFrom': 20,
'redTo': 30,
'greenColor': 999900,
'yellowColor': '#FFFF99',
'redColor': 660066,
'minorTicks': 10,
'animation':{
'duration': 800,
'easing': 'out'
}
//width of container determines whether gauges show up on same row or multiple rows
//'width':700
});
//alert('hello');
var elem = document.getElementById('gauge_div');
elem.style.opacity = 1.0;
wrap.draw();
}
function changeValuesBack() {
// Define the chart using setters:
//var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('Gauge');
wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=0');
wrap.setContainerId('gauge_div');
wrap.setOptions({
'min': 0,
'max': 35,
//greenFrom:0,
//greenTo:10,
'yellowFrom': 15,
'yellowTo': 20,
'redFrom': 20,
'redTo': 30,
'greenColor': 999900,
'yellowColor': '#FFFF99',
'redColor': 660066,
'minorTicks': 10,
'animation':{
'duration': 800,
'easing': 'out'
}
//width of container determines whether gauges show up on same row or multiple rows
//'width':700
});
//alert('hello');
var elem = document.getElementById('gauge_div');
elem.style.opacity = 0.6;
wrap.draw();
}
function drawVisualization(){
drawGauge();
drawTable();
}
</script>
</head>
<body>
<h3>Data for gauges located in this sheet on worksheets 1 and 2</h3>
<h3><a href = 'https://docs.google.com/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=sharing'> here.</a></h3>
<div id='gauge_div' style='height: 150px; width: 500px;'></div>
<div id='table_div'></div>
<input type="button" style="opacity:0.6" value="Last Month" onclick="changeValuesBack()"/>
<input type="button" value="This Month" onclick="changeValues()"/>
</body>
</html>
【问题讨论】：