Question

我有一个代码段可以正常使用谷歌图表抓取谷歌电子表格中的数据。但是，每当我尝试在同一电子表格中添加来自不同范围的另一个图表时，它将覆盖到原始div。

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

＆＃13;

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

＆＃13;

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电子表格

1 个答案: