使用MySQL数据生成Google Chart遇datetime格式问题求助

核心问题：Google Chart对DateTime的特殊要求 #

Google Chart不认普通的时间字符串，必须是JavaScript原生的Date对象，或者严格符合yyyy-MM-dd HH:mm:ss格式的字符串，而且月份是从0开始算的（1月对应0，12月对应11），这是最容易踩的坑。

方法一：SQL转JSON不显示的修复 #

为啥不行？ #

从MySQL直接读出来的时间转成JSON后就是普通字符串，Google Chart识别不了这是时间类型，自然不会渲染图表。

改法（以Python后端为例） #

1. 后端取数据时，把时间转成Google Chart能识别的数组格式：

   import mysql.connector
   import json
   
   # 连接数据库
   db = mysql.connector.connect(host="你的服务器地址", user="用户名", password="密码", database="气象站数据库名")
   cursor = db.cursor()
   cursor.execute("SELECT record_time, temperature, humidity FROM weather_data")
   rows = cursor.fetchall()
   
   # 整理成图表需要的格式
   chart_data = [["时间", "温度", "湿度"]]  # 先写表头
   for row in rows:
       dt = row[0]
       # 把时间拆成年、月（要减1）、日、时、分、秒的数组
       time_item = [dt.year, dt.month - 1, dt.day, dt.hour, dt.minute, dt.second]
       chart_data.append([time_item, row[1], row[2]])
   
   # 输出JSON给前端
   print(json.dumps(chart_data))
   

2. 前端拿到数据后，转成Date对象再喂给图表：

   google.charts.load('current', {'packages':['line']});
   google.charts.setOnLoadCallback(drawChart);
   
   function drawChart() {
       // 调用后端接口拿数据
       fetch('/你的后端接口路径')
           .then(res => res.json())
           .then(data => {
               const table = new google.visualization.DataTable();
               // 先定义列类型：第一列是datetime，后面是数值
               table.addColumn('datetime', '时间');
               table.addColumn('number', '温度');
               table.addColumn('number', '湿度');
               // 循环塞数据，把数组转成Date对象
               for (let i = 1; i < data.length; i++) {
                   const date = new Date(...data[i][0]);
                   table.addRow([date, data[i][1], data[i][2]]);
               }
               // 配置图表选项
               const options = {
                   title: '气象站温湿度数据',
                   curveType: 'function',
                   legend: { position: 'bottom' }
               };
               // 渲染图表
               const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
               chart.draw(table, options);
           });
   }
   

方法二：模仿手动格式报错的修复 #

常见踩坑点 #

1. 月份写错：比如你想写5月，手动写new Date(2024,5,20)，实际是6月，Google Chart认的是0开始的月份。
2. 时间格式不规范：如果用字符串传时间，必须是2024-05-20 14:30:00这种格式，不能有中文标点或者多余字符。
3. 数据类型不对：温度湿度如果是字符串类型，要转成数字，不然图表会报错。

正确的手动格式示例 #

const data = google.visualization.arrayToDataTable([
  ['时间', '温度', '湿度'],
  [new Date(2024, 4, 20, 14, 30, 0), 25.6, 62],  // 这里4对应5月
  [new Date(2024, 4, 20, 15, 0, 0), 26.1, 60]
]);

排查技巧 #

按F12打开浏览器控制台，看具体报错：

• 要是提示Invalid type for column 0，就是第一列不是datetime类型，检查有没有正确创建Date对象。
• 要是提示Cannot read property '0' of undefined，就是数据数组的结构和表头不对应，比如少列或者多列。

通用注意事项 #

• 确保MySQL里的时间字段是DATETIME或TIMESTAMP类型，别存成字符串，避免格式混乱。
• 前端要正确引入Google Chart的脚本：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  

• 测试时先console.log(data)看看数据结构对不对，类型是不是符合要求。

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