Google Line Chart报错‘First column must be a domain column’求助

错误原因分析 #

1. DataTable列类型不匹配：你在displaychart函数中把第一列定义为'string'类型，但实际传入的是Date对象，Google Line Chart要求日期型的domain列必须使用'date'类型。
2. 表头被错误加入数据行：循环处理数据时未跳过第一行表头（["city","date","volume"]），导致无效数据被加入DataTable，引发列类型冲突。
3. 函数名不匹配：前端脚本中调用的chart_draw()和draw_linechart()在App Script中不存在，实际函数名是draw_chart()，导致数据无法正常获取。
4. 过滤逻辑错误：
   • 使用city_data.city访问数组元素，而返回的是二维数组，应使用索引city_data[0]；
   • 过滤完成后未调用displaychart更新图表；
   • 空值判断逻辑混乱，默认选项是"All"，不会触发空值分支。
5. 图表容器ID不匹配：HTML中图表容器ID是hell，但脚本中使用document.getElementById('chart_container')，无法找到渲染容器。

解决方法及修正代码 #

1. 修正App Script函数（确保函数名一致） #

function draw_chart(){
  var ss = SpreadsheetApp.openById('XXXXXXX');
  var metrics_sheet = ss.getSheetByName('sheet1');
  var lastrow = metrics_sheet.getLastRow();
  var range = metrics_sheet.getRange("A1:X"+lastrow).getValues();
  // 定位最后一行非空数据
  var index_values = lastrow - range.reverse().findIndex(c=>c[0]!='');
  var values = metrics_sheet.getRange("A1:X"+index_values).getValues();
  var chart_dt = JSON.stringify(values); 
  Logger.log(chart_dt);
  return chart_dt;
}

2. 修正前端图表脚本 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<script src="https://www.gstatic.com/charts/loader.js"></script>    
<script type="text/javascript">    
  google.charts.load('current',{'packages':['corechart']});
  google.charts.setOnLoadCallback(drawchart);

  function drawchart(){
    // 调用正确的App Script函数名
    google.script.run.withSuccessHandler(displaychart).draw_chart();        
  }

  function get_filter_city(){                
    // 调用正确的App Script函数名
    google.script.run.withSuccessHandler(filter_data).draw_chart();             
  }       

  function filter_data(city_data){
    let city_select = document.getElementById("city").value;
    let filteredData;
    // 分离表头和数据行
    const headerRow = city_data[0];
    const dataRows = city_data.slice(1);

    if(city_select === "All"){
      filteredData = dataRows;
    }else{          
      // 按数组索引过滤城市数据
      filteredData = dataRows.filter(row => row[0] === city_select);          
    }     
    // 重新组合表头和过滤后的数据，传入渲染函数
    displaychart([headerRow, ...filteredData]);
  }

  function displaychart(c_data1){
    var datatable = new google.visualization.DataTable();
    // 第一列改为date类型，匹配日期数据
    datatable.addColumn('date','date');
    datatable.addColumn({type:'string',role:'annotation'});        
    datatable.addColumn('number','volume');

    var rows = [];

    // 从第1行开始循环，跳过表头
    for(var i=1;i<c_data1.length;i++){          
      var curr_element = c_data1[i];
      var e_date = new Date(curr_element[1]);
      // 仅加入有效日期数据
      if(!isNaN(e_date.getTime())){
        rows.push([e_date, curr_element[0], curr_element[2]]);
      }
    }
    datatable.addRows(rows);                      

    var options={
      title: 'Sales Volume'        
    };

    // 使用正确的容器ID渲染图表
    var chart = new google.visualization.LineChart(document.getElementById('hell'));
    chart.draw(datatable,options);
  }
</script>

3. 修正HTML（确保容器ID与脚本一致） #

<select id="city">
  <option value="All">All</option>
  <option value="san fran">san fran</option>
  <option value="chicago">chicago</option>
</select>
<button id="srch_btn" onclick="get_filter_city()"> Search </button> 
<div id="hell" class="chart_container"></div>

关键修正点总结 #

• 确保DataTable列类型与传入数据匹配，日期型domain列必须使用'date'类型；
• 循环处理数据时跳过表头行，避免无效数据进入图表；
• 统一前后端函数名，确保数据能正确获取；
• 修正过滤逻辑，使用数组索引访问数据，并在过滤后调用渲染函数更新图表；
• 匹配图表容器的ID，确保图表能正确渲染到页面。

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