如何刷新同一Plotly图表实例并解决x轴不显示时间数据问题

1. 刷新同一Plotly图表实例避免内存占用过高 #

你现有代码的问题是每次循环都会调用Create_Chart函数，函数内部每次重新创建Figure实例并调用fig.show()，自然会每次生成新图表占内存。
解决方案是使用Plotly的FigureWidget替代普通Figure，它支持原地更新数据，无需重复生成图表实例，初始化图表的逻辑只需要执行一次，后续更新仅修改trace的数据源即可。

2. x轴无时间信息的原因及修复 #

导致该问题的原因有3个：

• 你当前测试用的px.data.stocks()的date列是日线级别的日期数据，但你给x轴配置的范围选择器全是分钟、小时级的粒度，和实际数据不匹配，导致x轴范围适配异常
• 布局配置中margin的t（顶部边距）设为10，空间不足以显示x轴的范围选择器和时间标签
• 代码中错误添加了不存在的xaxis2_rangeslider_visible、xaxis3_rangeslider_thickness参数，干扰了x轴的正常渲染

修复后的完整代码 #

import datetime
from time import time, sleep
import plotly.graph_objs as go
import pytz 
import pandas as pd
import plotly.express as px

dataavl = 0
def GetData():
    if dataavl == 0:
        Data = px.data.stocks()
        Data['date']= pd.to_datetime(Data['date'])
        Data =  Data.head(100)
    else:
        Data = px.data.stocks()
        Data['date']= pd.to_datetime(Data['date'])
    return Data

# 初始化图表仅执行一次
init_df = GetData()
fig = go.FigureWidget()
# 添加trace仅执行一次
fig.add_trace(go.Line(x=init_df['date'], y=init_df['GOOG'], name = 'GOOG股价'))
# 布局配置仅执行一次
fig.update_layout(
    title={
        'text': "TESLA Live Share Price",
        'x':0.50,
        'xanchor': 'center',
        'yanchor': 'top'},
    yaxis_title='Stock Price ($ per Shares)',
    autosize=False,
    width=1250,
    height=900,
    legend=dict(
        x=0,
        y=.5,
        traceorder="normal",
        font=dict(
            family="sans-serif",
            size=12,
            color="black",
        )),            
    margin=dict(
        l=50,
        r=50,
        b=50,
        t=50, # 调整顶部边距留出x轴显示空间
        pad=4
    )
)
# x轴配置 移除无效的xaxis2、xaxis3参数
fig.update_xaxes(
    rangeslider_visible=False,
    # 如果后续接入真实分钟级数据，可以保留分钟级rangeselector配置，当前示例是日线数据按需修改为日/月维度
    rangeselector=dict(
        buttons=list([
            dict(count=7, label="7d", step="day", stepmode="backward"),
            dict(count=1, label="1m", step="month", stepmode="backward"),
            dict(step="all")
        ])
    )
)
# 首次展示图表
fig.show()
dataavl = 1

# 循环更新数据
while True:
    Data = GetData() 
    nyc_time = datetime.datetime.now(tz=pytz.timezone('US/Eastern'))
    print(f'Data Extracted at : {nyc_time.strftime("%b %d %Y %H:%M:%S.%f")[:-3]}')
    # 仅更新已有trace的x和y数据，不新建图表
    with fig.batch_update():
        fig.data[0].x = Data['date']
        fig.data[0].y = Data['GOOG']
    print(f'Chart Updated at : {nyc_time.strftime("%b %d %Y %H:%M:%S.%f")[:-3]}')
    sleep(60 - time() % 60)

核心修改说明 #

• 图表初始化和布局配置全部移到循环外，全程仅生成1个图表实例，内存不会持续上涨
• 每次数据更新仅修改trace的数据源，用batch_update优化更新性能，避免反复渲染全图
• 移除无效的x轴配置参数，调整边距留出x轴标签的显示空间，x轴时间信息即可正常展示

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