如何在Apps Script部署的Web应用中展示图表

1. 准备谷歌表格数据 #

在谷歌表格的Sheet1中创建如下测试数据：

2. 后端脚本（Code.gs） #

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function getSheetData() {
  // 替换为你的谷歌表格ID（URL中/d/和/edit之间的字符串）
  const sheetId = "YOUR_SHEET_ID";
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName("Sheet1");
  // 获取3行3列的测试数据（A2:C4范围）
  const data = sheet.getRange(2, 1, 3, 3).getValues();
  
  // 整理为前端可直接使用的格式
  return {
    labels: data.map(row => row[0]),
    pieValues: data.map(row => row[1]),
    barValues: data.map(row => row[2])
  };
}

3. 前端页面（index.html） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- 引入Chart.js用于渲染图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <div style="margin: 20px;">
      <h3>表格数据饼图</h3>
      <canvas id="pieChart" width="400" height="400"></canvas>
    </div>
    
    <div style="margin: 20px;">
      <h3>表格数据柱状图</h3>
      <canvas id="barChart" width="400" height="400"></canvas>
    </div>

    <script>
      // 调用后端接口获取表格数据，成功后渲染图表
      google.script.run.withSuccessHandler(renderCharts).getSheetData();

      function renderCharts(sheetData) {
        // 渲染饼图
        const pieCtx = document.getElementById('pieChart').getContext('2d');
        new Chart(pieCtx, {
          type: 'pie',
          data: {
            labels: sheetData.labels,
            datasets: [{
              label: '数值占比',
              data: sheetData.pieValues,
              backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
              hoverOffset: 4
            }]
          }
        });

        // 渲染柱状图
        const barCtx = document.getElementById('barChart').getContext('2d');
        new Chart(barCtx, {
          type: 'bar',
          data: {
            labels: sheetData.labels,
            datasets: [{
              label: '数值',
              data: sheetData.barValues,
              backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
              borderWidth: 1
            }]
          },
          options: {
            scales: {
              y: {
                beginAtZero: true
              }
            }
          }
        });
      }
    </script>
  </body>
</html>

4. 部署Web应用 #

1. 在Apps Script编辑器中，点击右上角「部署」→「新部署」
2. 部署类型选择「Web应用」
3. 设置：
   • 执行权限：选择「自己」
   • 谁可以访问：根据需求选择（测试阶段可选「任何人，甚至匿名」）
4. 点击「部署」，授权后复制生成的Web应用URL，在浏览器打开即可看到图表

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