Plotly无法渲染格式化时间字符串，仅支持Unix时间戳问题求助

后端Python处理方案 #

直接在后端把Unix时间戳转成Plotly可识别的ISO格式时间字符串，同时前端配置X轴为时间类型：

1. 修改后端代码，用datetime模块转换时间戳：

from datetime import datetime
import pytz  # 可选，用于指定时区（如UTC或本地时区）

@app.route("/backend", methods=["POST"])
def data_sci_alg():
    rdy2plot = {}
    time_stamps = [1666202064.0, 1666202065.0, ...]
    # 转换为ISO 8601格式字符串，这里用UTC时区，可替换为其他时区
    time = [datetime.fromtimestamp(ts, pytz.utc).isoformat() for ts in time_stamps]
    atn = ['N930NN', ...]
    alt = [10000, ...]
    cspeed = [1200, ...]
    data = {
            "aircraft_tail_number": atn,
            "time": time,
            "altitude": alt,
            "current_speed": cspeed,
        }    
    rdy2plot.update(data)
    return jsonify(rdy2plot)

2. 前端补充布局配置，明确X轴类型并自定义显示格式：

// 定义全局布局变量
const layout = {
    xaxis: {
        type: 'datetime',
        title: '时间',
        tickformat: '%Y-%m-%d %H:%M:%S' // 匹配你需要的可读时间格式
    }
};

function plot(data){
    // 注意：后端返回的键名是aircraft_tail_number/altitude/current_speed，需和前端对应
    var atn = data['aircraft_tail_number']
    var time = data['time']
    var alt = data['altitude']
    var cspeed = data['current_speed']
    data_update.push({x: time, y: alt, name: `${atn} Altitude`, type:"scatter"});
    data_update.push({x: time, y: cspeed, name: `${atn} Speed`, type:"scatter"});
    Plotly.react('graph', data_update, layout);
}

前端JS处理方案 #

保留后端的Unix时间戳返回，前端直接转换为Plotly支持的毫秒级时间戳，同时配置X轴：

const layout = {
    xaxis: {
        type: 'datetime',
        title: '时间',
        tickformat: '%Y-%m-%d %H:%M:%S'
    }
};

function plot(data){
    var atn = data['aircraft_tail_number']
    // 把秒级时间戳转为毫秒（Plotly datetime类型默认使用毫秒级时间戳）
    var time = data['time'].map(ts => ts * 1000);
    var alt = data['altitude']
    var cspeed = data['current_speed']
    data_update.push({x: time, y: alt, name: `${atn} Altitude`, type:"scatter"});
    data_update.push({x: time, y: cspeed, name: `${atn} Speed`, type:"scatter"});
    Plotly.react('graph', data_update, layout);
}

关键注意点 #

• 之前用普通字符串时间无法渲染，是因为Plotly默认不会识别非ISO格式的时间字符串为时间类型，必须明确设置xaxis.type = 'datetime'，同时确保数据是Plotly可解析的格式（ISO字符串/毫秒级时间戳）。
• 前端代码中要注意键名匹配：后端返回的键是aircraft_tail_number、altitude、current_speed，原前端代码里的data['atn']等是错误的，必须修正。

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