如何在Google Apps Script中关联Chart.gs与含Chart.js的HTML文件？

Google Apps Script里服务器端的.gs文件和客户端HTML页面的交互核心是**google.script.run API**，下面是具体的实现方案：

方案1：异步获取服务器端数据并渲染图表（最常用） #

这种方式适合从Google Sheets、外部API或其他服务动态获取数据的场景。

1. 在chart.gs中定义数据接口函数 #

写一个返回图表数据的全局函数，比如从Sheet读取或者生成模拟数据：

// chart.gs
function getChartDataset() {
  // 示例：返回模拟的图表数据，实际可替换为读取Sheet的逻辑
  return {
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
      label: "年度营收",
      data: [45000, 62000, 78000, 91000],
      backgroundColor: "#FF6384",
      borderColor: "#FF6384",
      borderWidth: 2
    }]
  };
}

2. 在HTML页面中调用函数并渲染Chart.js #

利用google.script.run异步调用gs函数，通过成功回调拿到数据后初始化图表：

<!-- HTML页面 -->
<canvas id="revenueChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // 页面加载完成后触发数据请求
  document.addEventListener('DOMContentLoaded', function() {
    // 调用chart.gs中的getChartDataset函数
    google.script.run
      .withSuccessHandler(initChart) // 数据返回成功后的处理函数
      .withFailureHandler(function(error) {
        console.error('获取数据失败:', error);
      }) // 可选：处理请求失败的情况
      .getChartDataset();
  });

  // 初始化Chart.js图表
  function initChart(data) {
    const ctx = document.getElementById('revenueChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            title: { display: true, text: '营收(元)' }
          }
        }
      }
    });
  }
</script>

方案2：直接嵌入服务器端静态数据 #

如果图表数据是固定的，可以直接把gs中的变量注入到HTML中：

1. 在chart.gs中定义静态数据 #

// chart.gs
const STATIC_CHART_DATA = {
  labels: ["红色", "蓝色", "黄色", "绿色"],
  datasets: [{
    label: "投票数",
    data: [12, 19, 3, 5],
    backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0"]
  }]
};

2. 在HTML中注入数据并初始化 #

使用<?= ?>语法将gs变量转成JSON字符串，直接在客户端使用：

<!-- HTML页面 -->
<canvas id="voteChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // 从服务器端注入静态数据
  const chartData = <?= JSON.stringify(STATIC_CHART_DATA) ?>;
  
  window.onload = function() {
    const ctx = document.getElementById('voteChart').getContext('2d');
    new Chart(ctx, {
      type: 'doughnut',
      data: chartData
    });
  };
</script>

关键注意事项 #

• google.script.run是异步操作，必须通过withSuccessHandler处理返回结果，不能直接同步赋值
• 如果需要向gs函数传递参数，直接在调用时添加：google.script.run.getChartDataset('2024')，对应gs函数定义为function getChartDataset(year) { ... }
• gs中的函数必须是全局可访问的，不能用function() { ... }包裹成局部函数
• 若涉及敏感数据，确保gs函数做好权限校验，避免未授权访问

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