You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:解决Google Annotation Chart的「First column must contain date, or date and time.」格式错误

求助:解决Google Annotation Chart的「First column must contain date, or date and time.」格式错误

嘿,我来帮你搞定这个问题!你遇到的报错本质是Google Annotation Chart对第一列的日期格式有严格要求——它不认普通的自定义日期字符串,也不认Date.toString()返回的那种可读性字符串,只认原生JavaScript Date对象或者标准ISO 8601格式的字符串(就是你最开始init_data里的那种"2022-05-01T18:30:00.000Z"格式)。

下面给你三种可行的解决方案,按需选用:

方案一:直接用原始ISO日期字符串(最简单高效)

其实你最开始的init_data里的日期格式完全符合要求!根本不需要用convertdate函数去转成自定义字符串,直接把原始数据传给arrayToDataTable就行,Google Charts会自动识别ISO格式的日期:

// 直接使用原始的init_data,无需转换日期
var chart_data = google.visualization.arrayToDataTable(init_data);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
  displayAnnotations: true
};

chart.draw(chart_data, options);

方案二:传递原生Date对象(如果需要预处理日期)

如果你确实需要对日期做一些处理(比如时区转换等),不要把日期转成字符串,而是直接返回Date实例:
先修改你的日期转换函数:

function convertdate(dateStr) {
  // 直接返回原生Date对象,不要转成自定义字符串
  return new Date(dateStr);
}

然后生成数据时替换第一列为Date对象:

// 初始化表头
var data = [['Week','A','A Title','A Annot','B','B Title','B Annot']];
// 遍历原始数据的行(跳过第一行表头)
for(let i = 1; i < init_data.length; i++) {
  let row = [...init_data[i]];
  row[0] = convertdate(row[0]); // 替换成Date实例
  data.push(row);
}

// 生成DataTable并绘制图表
var chart_data = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
  displayAnnotations: true
};

chart.draw(chart_data, options);

方案三:自定义日期显示格式(如果要显示成mm/dd/yyyy)

如果你希望图表上的日期显示为mm/dd/yyyy的样式,不要修改原始数据的日期类型,而是在图表配置项里设置dateFormat:

var chart_data = google.visualization.arrayToDataTable(init_data);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
  displayAnnotations: true,
  dateFormat: 'MM/dd/yyyy' // 配置成你想要的显示格式
};

chart.draw(chart_data, options);

这样既保证了数据类型符合要求,又能让日期显示成你想要的样子。

总结一下:报错的核心是你把日期转成了Google Charts无法识别为日期类型的字符串,只要把第一列的内容改成原生Date对象或者标准ISO字符串,问题就能解决啦!

备注:内容来源于stack exchange,提问作者Curious_learner

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.15 09:58:02