Google Visualization API 在同一个 HTML 上加载 2 个脚本答案

【问题标题】：Google Visualization API load 2 scripts on the same HTMLGoogle Visualization API 在同一个 HTML 上加载 2 个脚本
【发布时间】：2019-12-07 12:06:24
【问题描述】：

您好，我试图在同一页面加载 2 个脚本，但它们似乎相互重叠。在第一个脚本中，我得到一个包含几列和单元格的表格。在第二个中，我从第二个工作表选项卡中只得到一个单元格，但正如我所说，它们相互重叠，我一次只能看到一个。这是我第一次使用谷歌可视化，我试图重命名变量和名称，但我得到了同样的东西。有没有办法将两个脚本合并为一个，并让 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);

【问题讨论】：

标签： javascript html google-sheets google-visualization google-sheets-api

【解决方案1】：

将它们组合成一个脚本。
您只需要加载一次谷歌图表，
无论绘制多少表格/图表。

请看下面的 sn-ps...

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>

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'
    });
  }
});

【讨论】：