如何从同一个 Google 电子表格在一个页面上添加多个 google 图表

Question

我有一个片段可以正确处理一个 google 从 google 电子表格中抓取数据的图表。但是，每当我尝试在同一电子表格中添加来自不同范围的另一个图表时，它会覆盖原始 div。

有人能指出我正确的方向吗？非常感谢。

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.charts.load("visualization", "1.1", {
      packages: ["bar"]
    });
    //google.charts.load('upcoming', {'packages': ['geochart']});
    google.charts.setOnLoadCallback(drawtotalChart);
    google.charts.setOnLoadCallback(drawkpiChart);
    //google.charts.setOnLoadCallback(drawKpiChart);
    //google.charts.setOnLoadCallback(drawMarkersMap);
    //google.charts.setOnLoadCallback(drawOrdersChart);
  </script>
  <script type="text/javascript">
    var totalChart;

    function drawtotalChart() {

      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G23:I32');


      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' +
          response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      totalChart = new google.charts.Bar(document.getElementById('columnchart_material'));
      totalChart.draw(data, null);
    }
    google.setOnLoadCallback(drawtotalChart);
  </script>
  <script type="text/javascript">
    var kpiChart;

    function drawkpiChart() {

      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G36:K44');


      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' +
          response.getDetailedMessage());
        return;
      }

      var kpi = response.getDataTable();
      kpiChart = new google.charts.Bar(document.getElementById('chart_div'));
      kpiChart.draw(kpi, null);
    }
    google.setOnLoadCallback(drawkpiChart);
  </script>

</head>

<body>
  <!--Table and divs that hold the charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
      </td>
      <td>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="Geochart_div" style="width: 00px; height: 500px;"></div>
      </td>
    </tr>
  </table>

</body>

</html>

Answer 1

您正在为两个图表重复使用 handleQueryResponse，并且调用第一个加载的图表来处理对两个图表的查询。仅仅因为它们位于不同的 <script> 块中并不会将它们拆分出相同的范围，所以您遇到了冲突。如果您稍微重组 JavaScript，它应该可以工作：

// Load the bar chart package
google.charts.load("visualization", "1.1", {
    packages: ["bar"]
  });

// Set the chart callbacks
google.charts.setOnLoadCallback(drawtotalChart);
google.charts.setOnLoadCallback(drawkpiChart);

var totalChart;

function drawtotalChart() {

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G23:I32');


  // Send the query with a callback function.
  query.send(handleTotalQueryResponse);
}

// Callback specific to the total chart
function handleTotalQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' +
      response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  totalChart = new google.charts.Bar(document.getElementById('columnchart_material'));
  totalChart.draw(data, null);
}

var kpiChart;

function drawkpiChart() {

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G36:K44');


  // Send the query with a callback function.
  query.send(handleKpiQueryResponse);
}

// Callback specific to the KPI chart
function handleKpiQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' +
      response.getDetailedMessage());
    return;
  }

  var kpi = response.getDataTable();
  kpiChart = new google.charts.Bar(document.getElementById('chart_div'));
  kpiChart.draw(kpi, null);
}

如何从同一个 Google 电子表格在一个页面上添加多个 google 图表

How to add more than one google chart on a page from the same Google spreadsheet

javascript

google-visualization

google-sheets-api