Google Chart DateTime格式适配：AJAX导入PHP数据生成折线图报错解决

Google Chart的datetime列类型不接受Date(2023, 1, 1, 20, 00, 00)这类字符串，因为JSON无法序列化原生Date对象，必须通过以下几种方式处理：

方案1：PHP输出ISO 8601日期字符串，JS端转换为Date对象 #

PHP端生成数据时，将日期格式化为ISO 8601标准字符串，这是JSDate构造函数能直接解析的格式：

// 示例：将时间转换为ISO字符串
$timestamp = strtotime('2023-01-01 20:00:00');
$isoDate = date('c', $timestamp);

// 构造数据源数组
$data = [
    [$isoDate, 120],
    [date('c', strtotime('2023-01-02 21:00:00')), 150]
];

echo json_encode($data);

JS端拿到JSON后，遍历数据将日期字符串转为Date对象：

// 假设AJAX请求返回的response是上述PHP输出的JSON
fetch('your-data.php')
  .then(res => res.json())
  .then(rawData => {
    // 转换日期格式
    const chartData = rawData.map(row => [new Date(row[0]), row[1]]);
    
    // 初始化图表
    const dataTable = google.visualization.arrayToDataTable([
      ['时间', '数值'],
      ...chartData
    ]);
    
    // 渲染图表...
  });

方案2：PHP输出Google Chart兼容的日期数组格式 #

Google Chart支持通过特定数组结构表示日期，PHP可以直接输出包含日期参数的数组，再由JS转换为Date对象：

// 注意：Google Chart的月份从0开始（1月=0，2月=1...）
$data = [
    [['Date', 2023, 0, 1, 20, 0, 0], 120], // 对应2023年1月1日20:00
    [['Date', 2023, 0, 2, 21, 0, 0], 150]
];

echo json_encode($data);

JS端解析这个数组并构造Date：

function convertToDate(dateInfo) {
  if (dateInfo[0] === 'Date') {
    // 解构数组：[标记, 年, 月, 日, 时, 分, 秒]
    return new Date(dateInfo[1], dateInfo[2], dateInfo[3], dateInfo[4], dateInfo[5], dateInfo[6]);
  }
  return dateInfo;
}

fetch('your-data.php')
  .then(res => res.json())
  .then(rawData => {
    const chartData = rawData.map(row => [convertToDate(row[0]), row[1]]);
    
    const dataTable = google.visualization.arrayToDataTable([
      ['时间', '数值'],
      ...chartData
    ]);
    
    // 渲染图表...
  });

方案3：直接使用DataTable API逐行添加数据 #

这种方式更灵活，适合复杂数据场景：

fetch('your-data.php')
  .then(res => res.json())
  .then(rawData => {
    const dataTable = new google.visualization.DataTable();
    dataTable.addColumn('datetime', '时间');
    dataTable.addColumn('number', '数值');
    
    // 逐行转换并添加数据
    rawData.forEach(row => {
      // row[0]可以是ISO字符串或时间戳
      dataTable.addRow([new Date(row[0]), row[1]]);
    });
    
    // 渲染图表...
  });

关键注意事项 #

• Google Chart的datetime类型中，月份是从0开始计数的，比如1月对应0，12月对应11，PHP生成数据时要注意转换，避免日期偏移。
• 不要直接在JSON中传递Date(...)字符串，JSON不支持这种语法，必须通过字符串或数组传递日期信息后在JS端转换为原生Date对象。

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