Google Apps Script拉取电子表格数据生成饼图部署后显示空白如何解决

问题排查与修复方案 #

现存问题 #

• 调用链路完全断裂：代码注册了google.charts.setOnLoadCallback(drawChart)但未定义drawChart函数；同时初始化查询的initialize函数从未被调用，也没有执行查询发送逻辑，从未拉取电子表格数据，所以没有任何内容渲染。
• 变量作用域错误：chart、data均为handleQueryResponse内的局部变量，点击事件回调selectHandler无法访问，触发时会直接报错。
• 细节瑕疵：图表容器的宽高样式未加px单位，部分浏览器可能出现渲染异常；未做选中项非空判断，点击图表空白区域也会触发报错。
• 权限前置要求：你使用的Google电子表格需要设置为「任何人只要有链接即可查看」，否则查询请求会被权限拦截。

修正后代码 #

HTML文件

<html>
  <head>
    <!--Load the AJAX API-->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      // 声明全局变量供跨函数访问
      let chart;
      let data;
      
      google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        const opts = {sendMethod: 'auto'};
        const query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
        // 发送查询请求绑定回调
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('查询出错: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        data = response.getDataTable();
        
        const options = {
          'title':'昨晚食用披萨占比',
          'width':400,
          'height':300
        };
        
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        const selectedItem = chart.getSelection()[0];
        // 增加非空判断避免点击空白区域报错
        if (selectedItem) {
          const value = data.getValue(selectedItem.row, 0);
          alert('你选中了: ' + value);
        }
      }

    </script>
  </head>
  <body>
    <!-- 补全css单位 -->
    <div id="chart_div" style="width:400px; height:300px"></div>
  </body>
</html>

后端GS文件（可选优化，解决跨域嵌入限制）

function doGet() {
  return HtmlService.createHtmlOutputFromFile('webappchartv2')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

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