Google 可视化 API 在同一个 HTML 上加载 2 个脚本

Question

您好，我正在尝试在同一页面加载 2 个脚本，但它们似乎重叠 eachother.In 第一个脚本我得到的 table 包含一些列和单元格。在第二个中，我只从第二个 sheet 选项卡中得到一个单元格，但正如我所说，它们彼此重叠，我一次只能看到一个。这是我第一次使用 google 可视化，我尝试重命名变量和名称，但我得到了相同的 thing.Is 有一种方法可以将两个脚本合并为一个并加载 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);

Answer 1

将它们合并为一个脚本。
您只需要加载 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'
    });
  }
});

Google 可视化 API 在同一个 HTML 上加载 2 个脚本

Google Visualization API load 2 scripts on the same HTML

html

javascript

google-visualization

google-sheets

google-sheets-api