App Script Web应用绘制Google Charts时数据类型报错与字段异常

1. 先解决c_data1[i].region返回undefined的问题 #

这个问题本质是前端拿到的数据结构和你预期的不一样：

• 如果你在GAS里直接用sheet.getValues()返回数据，得到的是二维数组（格式类似[['region', 'date', 'value'], ['北京', '2024-01', 100], ...]），每个元素是数组，不是带region、date等键的对象，所以用.region自然取不到值。
• 解决方法：
  要么在GAS里把二维数组转成对象数组：

  function getSheetData() {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('你的表名');
    const allValues = sheet.getDataRange().getValues();
    const headers = allValues[0]; // 取第一行当表头
    // 从第二行开始转换为对象
    const formattedData = allValues.slice(1).map(row => {
      const obj = {};
      headers.forEach((header, idx) => {
        obj[header] = row[idx];
      });
      return obj;
    });
    return formattedData;
  }
  

  要么在前端收到数据后自行转换：

  google.script.run.withSuccessHandler(rawData => {
    const headers = rawData[0];
    const c_data1 = rawData.slice(1).map(row => {
      const obj = {};
      headers.forEach((h, i) => obj[h] = row[i]);
      return obj;
    });
    // 后续绘图逻辑
  }).getSheetData();
  

2. 解决「All series on a given axis must be of the same data type」错误 #

这个错误是因为折线图要求同一坐标轴上的数据类型完全统一（比如X轴全是日期/字符串，Y轴全是数字），常见原因和解决：

• 数值字段是字符串类型：如果Sheets里的数值单元格是文本格式，转成对象后还是字符串，Y轴无法识别为数值。
  解决：转换数据时把数值字段转为Number类型，比如在GAS里处理：

  headers.forEach((header, idx) => {
    // 假设你的数值字段叫'value'，根据实际字段名修改
    obj[header] = header === 'value' ? Number(row[idx]) : row[idx];
  });
  

  或者在前端处理：

  c_data1.forEach(item => {
    item.value = Number(item.value);
  });
  

• 日期/标签字段类型混乱：如果X轴混用了日期对象和字符串，或者不同格式的字符串，也会触发错误。
  解决：统一转成字符串（比如YYYY-MM-DD格式）或者Date对象，比如：

  // GAS里把日期转成统一格式字符串
  obj[header] = header === 'date' ? row[idx].toISOString().split('T')[0] : row[idx];
  

• 绘图库数据结构错误：比如使用Chart.js/Google Charts时，传入的数据集格式不符合要求。以Chart.js为例，正确的结构应该是：

  const labels = c_data1.map(item => item.date); // 全是统一格式的日期字符串
  const values = c_data1.map(item => item.value); // 全是数字
  const chart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: '区域数据',
        data: values,
        borderColor: '#2196F3'
      }]
    }
  });
  

3. 关键排查步骤 #

在处理前先打印完整数据结构确认问题：

google.script.run.withSuccessHandler(data => {
  console.log('原始返回数据:', data); // 先看整体结构是二维数组还是对象数组
  // 转换后再打印
  const c_data1 = ...; // 转换逻辑
  console.log('转换后的数据:', c_data1);
  console.log('第一个元素的region:', c_data1[0]?.region);
}).getSheetData();

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