从Google Spreadsheet取数绘制Google ColumnChart出现空白的问题咨询

核心错误点 #

• DOM元素ID不匹配：HTML中定义的图表容器ID为div_chart，但渲染代码通过document.getElementById('chart_div')获取节点，不存在匹配的挂载位置，图表无目标可渲染直接返回空白。
• URL参数位置错误：原代码将查询字符串、gid参数全部放在URL的#锚点段，锚点内容仅在浏览器本地解析，不会作为请求参数发送给服务器，实际请求既没有指定目标工作表，也没有携带自定义查询条件。
• 查询语法不符合规范：原查询语句写为SELECT A3:B25，不符合Google可视化查询的语法规则——SELECT后仅能指定列标识，无法直接写入单元格范围，会导致查询静默失败，无法拉取到目标数据。
• 接口端点使用错误：原代码直接使用表格的编辑页地址作为查询请求地址，没有使用专用的数据查询端点，会导致接口返回HTML页面而非可解析的结构化数据。

缺失的必要配置 #

• 需要在查询参数中显式指定输出格式为JSON，避免接口返回非结构化内容导致解析失败
• 需通过Query对象的setQuery方法传入查询语句，而非直接拼接在URL锚点后

修正后的通用代码（可无缝切换LineChart） #

<!DOCTYPE html>
<html>
<head>
  <title>股票数据图表</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <!-- 保留原页面定义的容器ID -->
  <div id="div_chart"></div>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // 规范的查询端点：替换为对应表格ID、目标工作表gid
      const baseQueryUrl = 'https://docs.google.com/spreadsheets/d/1DOq0dwcWN09MA-ScFbUF-Abl0OKzfqthx_ixpxIq7P0/gviz/tq?tqx=out:json&gid=59852832';
      // 正确的查询逻辑：选取A、B列，跳过前2行（对应从第3行开始取数），共取23行覆盖到第25行
      const queryText = encodeURIComponent('SELECT A, B OFFSET 2 LIMIT 23');
      const query = new google.visualization.Query(baseQueryUrl);
      query.setQuery(queryText);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('查询出错：' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      const data = response.getDataTable();
      // 后续切换LineChart仅需替换此处的图表类名，其余数据处理逻辑无需改动
      const chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));
      chart.draw(data, {
        height: 400,
        title: '股票收盘价'
      });
    }
  </script>
</body>
</html>

复用为LineChart的操作说明 #

• 仅需将代码中google.visualization.ColumnChart替换为google.visualization.LineChart，数据拉取、响应解析的全流程逻辑可直接复用
• 针对公开「链接可访问」的表格，无需额外配置鉴权参数，即可正常拉取数据

内容的提问来源于stack exchange，提问作者Nadim Youssef