修复适配Google Charts API实时图表的Flask JSON数据格式问题

听起来你遇到的核心问题是：Flask返回的JSON数据被混入了额外HTML内容，导致Google Charts无法正确解析。这通常是因为你用了render_template返回HTML模板，而不是直接返回纯JSON响应。我来给你一步步解决：

1. 修正Flask路由，直接返回JSON #

你之前的路由可能是用render_template('getjson.html', tempdata=tempdata)来传递数据，这会让Flask渲染HTML模板（哪怕你的模板里只有变量），很容易引入额外的HTML标签、换行或空格。正确的做法是直接返回JSON响应：

方法一：用Flask的jsonify（推荐） #

jsonify会自动处理序列化，并设置正确的Content-Type响应头：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/getjson')
def getjson():
    # 假设tempdata是从数据库取到的最后一行数据，是Python字典/列表格式
    # 比如 tempdata = {"time": "2024-05-20 14:30", "temperature": 25.6}
    return jsonify(tempdata)

方法二：直接返回JSON字符串（如果已经提前序列化） #

如果你的tempdata已经是格式化好的JSON字符串，直接返回并指定响应头：

@app.route('/getjson')
def getjson():
    # 比如tempdata是从数据库取出后已经转成JSON的字符串
    return tempdata, 200, {'Content-Type': 'application/json'}

2. 验证返回内容是否纯净 #

修改完路由后，直接访问/getjson路径，你应该看到纯JSON内容，没有任何HTML标签（比如<html>、<body>或者多余的换行）。如果还有问题，检查：

• 你的tempdata是否正确（有没有包含非JSON兼容的数据类型，比如Python的datetime对象，需要先转成字符串）
• 有没有其他Flask中间件或扩展自动添加了内容

3. 前端调用调整（确保正确解析JSON） #

在前端Google Charts的代码里，确保你是通过AJAX请求获取纯JSON，而不是加载HTML页面。比如用fetch：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  fetch('/getjson')
    .then(response => {
      // 先检查响应是否成功
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json(); // 解析JSON
    })
    .then(data => {
      // 把数据转换成Google Charts需要的DataTable格式
      const chartData = new google.visualization.DataTable();
      chartData.addColumn('string', '时间');
      chartData.addColumn('number', '温度');
      // 假设data是包含时间和温度的对象
      chartData.addRow([data.time, data.temperature]);

      // 配置图表选项并绘制
      const options = {
        title: '实时温度监控',
        curveType: 'function',
        legend: { position: 'bottom' }
      };
      const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(chartData, options);
    })
    .catch(error => {
      console.error('获取数据出错:', error);
    });
}

这样调整后，Flask返回的就是纯净的JSON数据，Google Charts就能正确解析并渲染实时图表了。

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