Google Line Chart第0列设为日期后无法加载，如何适配DateRange Filter？

问题核心原因 #

你遇到的a.getTime() is not a function错误，90%以上的概率来自两个常见坑：

1. 原有日期有效性判断逻辑存在缺陷，可能存在未被捕获的无效日期仍以字符串形式传入
2. Google Charts的DataTable未显式声明第0列为date类型，即使你传入了Date对象，整列还是会被识别为字符串类型，触发方法调用错误

解决步骤 #

1. 修正日期有效性判断逻辑

原有dato != "Invalid Date"的判断方式不严谨，Invalid Date是日期对象类型，和字符串做相等判断存在隐式转换风险，改用时间戳判断逻辑：

data.yearChart.forEach(row => {
  let dato =  new Date(row[0]);
  // 仅当日期有效时才替换值
  if(!isNaN(dato.getTime())){
      row[0] = dato;
  } else {
      // 可添加日志定位无效值
      console.warn('发现无效日期：', row[0]);
  }
});

2. 显式声明DataTable的列类型

不要使用arrayToDataTable的自动类型推断，手动定义每一列的类型，确保第0列明确为date类型：

// 先创建空DataTable
const dataYear = new google.visualization.DataTable();
// 显式声明第0列为date类型
dataYear.addColumn('date', '日期');
// 按需添加其他数值列，示例：
dataYear.addColumn('number', '访问量');
dataYear.addColumn('number', '转化率');
// 最后插入处理好的行数据
dataYear.addRows(data.yearChart);

3. 统一执行顺序

确保数据处理、DataTable初始化、格式化、筛选器绘制、图表绘制的顺序没有错乱：

// 顺序1：完成原始数据的日期转换
// 顺序2：完成DataTable初始化和数据填充
// 顺序3：执行日期格式化
var formatChart = new google.visualization.DateFormat({formatType: 'short'});
formatChart.format(dataYear, 0);
// 顺序4：绘制日期范围筛选器
dateSlider.draw(dataYear);
// 顺序5：绘制折线图
chart.draw(dataYear, options);

排查验证 #

如果修改后仍报错，可在绘制图表前加一行调试代码，确认列类型和值正确：

// 打印第0列的类型和第一行的第0列值
console.log('第0列类型：', dataYear.getColumnType(0));
console.log('第一行日期值：', dataYear.getValue(0, 0), typeof dataYear.getValue(0, 0));

只要输出列类型为date、值为Date对象，即可正常渲染图表和使用日期范围筛选功能。

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