javascript - Google Visualization API在同一HTML上加载2个脚本

您好，我试图在同一页面上加载2个脚本，但它们似乎彼此重叠。在第一个脚本中，我获取了一个包含一些列和单元格的表。在第二个中，我从第二个工作表标签中仅获取了一个单元格，但是正如我所说的那样，它们彼此重叠，一次只能看到一个。这是我第一次使用Google可视化工具，我试图重命名变量和名称，但是我得到的是相同的东西。谢谢。

<!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>

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