您好，我试图在同一页面上加载 2 个脚本，但它们似乎相互重叠。在第一个脚本中，im 获取一个包含几列和单元格的表。在第二个中，我只从第二个工作表选项卡中获得一个单元格，但正如我所说，它们相互重叠，我一次只能看到一个。这是我第一次使用谷歌可视化，我试图重命名变量和名称，但我得到了同样的东西。有没有办法将两个脚本合并为一个，并让 html 页面加载它们而不会重叠。谢谢。
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
</head>
<body >
<div id="box">
<script src="js/google-sheets-html.js" type="text/javascript"></script>
<div id="table">
</div>
</div>
<div id="box2">
<script src="js/google-sheets-html2.js" type="text/javascript"></script>
<div id="table2">
</div>
</div>
</body>
</html>
第一个脚本
google.load('visualization', '1', {
packages: ['table']
});
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxx&output=html&usp=sharing');
query.setQuery('SELECT A, B, C, D, E, F, G ,H ,I ORDER BY A DESC Limit 10 label A "Date", B "Agent", C "Client", D "Country", E "Desk", F "Department", G "Method", H "Amount", I "Currency"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
google.setOnLoadCallback(drawVisualization);
第二个脚本
google.load('visualization', '1', {
packages: ['table']
});
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?gid=xxx');
query.setQuery('SELECT A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table2'));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
google.setOnLoadCallback(drawVisualization);
将它们组合成一个脚本。
您只需要加载一次Google图表，
无论绘制的表格/图表数量如何。
请参阅以下代码片段...
.HTML
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
</head>
<body >
<div id="box">
<div id="table">
</div>
</div>
<div id="box2">
<div id="table2">
</div>
</div>
<script src="js/google-sheets-html.js"></script>
</body>
</html>
.JS
google.charts.load('current', {
packages: ['table']
}).then(function () {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxx&output=html&usp=sharing');
query.setQuery('SELECT A, B, C, D, E, F, G ,H ,I ORDER BY A DESC Limit 10 label A "Date", B "Agent", C "Client", D "Country", E "Desk", F "Department", G "Method", H "Amount", I "Currency"');
query.send(function (response) {
handleQueryResponse(response, 'table');
});
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/xxx/gviz/tq?gid=xxx');
query.setQuery('SELECT A');
query.send(function (response) {
handleQueryResponse(response, 'table2');
});
function handleQueryResponse(response, id) {
if (response.isError()) {
alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById(id));
visualization.draw(data, {
allowHtml: true,
legend: 'bottom'
});
}
});