如何在浏览器中查看Matplotlib FuncAnimation生成的实时动态绘图

我正在使用matplotlib的FuncAnimation函数生成实时绘图，绘制的是实时动态更新的数据，希望在浏览器中查看更新内容，而非在本地独立绘图窗口展示。
现有示例代码如下：

import numpy as np
import matplotlib.pyplot as plt
from matplotlib import animation
import mpld3

def animate(i):
    plt.clf()
    # 生成随机数据
    x = np.array([i for i in range(100)])
    y = np.random.normal(loc=0,scale=1, size = 100)
    
    plt.scatter(x,y)

def main():
    fig = plt.figure()
    ani = animation.FuncAnimation(fig, animate, interval=1000)
    ani.save('animation.gif', fps=10)
    plt.show()
    #mpld3.show()

if __name__ == '__main__':
    main()

目前代码会在独立小窗口中打开绘图，效果如下：

我尝试过mpld3但只能得到不会更新的静态页面，希望浏览器中的绘图可以随animate函数的每次重绘同步更新，和本地窗口展示效果一致，请问最优/最快的替代方案是什么？

mpld3本身仅支持静态matplotlib图表转HTML，不支持FuncAnimation的动态渲染，因此无法满足需求，推荐以下两种方案：

方案1：使用matplotlib内置HTML动画导出（最快，改动最小） #

该方法不需要额外安装第三方库，完全复用原有matplotlib绘图逻辑，仅需少量修改就能直接生成可在浏览器中运行的动态HTML文件，动画效果和本地窗口完全一致。
修改后的代码如下：

import numpy as np
import matplotlib.pyplot as plt
from matplotlib import animation

def animate(i):
    plt.clf()
    # 生成随机数据
    x = np.arange(100)
    y = np.random.normal(loc=0, scale=1, size=100)
    plt.scatter(x, y)
    # 固定坐标轴范围避免每次重绘时坐标轴跳动
    plt.ylim(-4, 4)

def main():
    fig = plt.figure()
    # frames参数可根据需要设置动画总帧数，设置为None则无限循环
    ani = animation.FuncAnimation(fig, animate, interval=1000, frames=100)
    # 直接导出为自包含的HTML文件
    with open("realtime_plot.html", "w") as f:
        f.write(ani.to_jshtml())
    # 可选：运行完成后自动打开浏览器查看
    # import webbrowser
    # webbrowser.open("realtime_plot.html")
    print("动画已导出为realtime_plot.html，直接用浏览器打开即可查看")

if __name__ == '__main__':
    main()

该方案优势：

• 代码改动量极小，原有绘图逻辑完全保留
• 生成的HTML无额外依赖，拷贝到任意设备都能打开查看
• 内置播放控制栏，支持暂停、逐帧播放、调速等功能

方案2：使用Plotly Dash实现真正的实时后端驱动更新 #

如果需要对接真实的实时数据源（比如传感器数据、接口返回数据），需要后端持续生成新数据同步到浏览器，可以使用轻量的Dash框架实现。
示例代码如下：

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import numpy as np

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='live-graph'),
    dcc.Interval(
        id='interval-component',
        interval=1*1000,  # 每1秒更新一次，单位为毫秒
        n_intervals=0
    )
])

@app.callback(Output('live-graph', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_graph(n):
    # 此处可替换为你的真实实时数据获取逻辑
    x = np.arange(100)
    y = np.random.normal(loc=0, scale=1, size=100)
    fig = px.scatter(x=x, y=y, range_y=[-4,4])
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

运行代码后直接在浏览器访问http://127.0.0.1:8050即可看到实时更新的散点图，数据会按照设置的间隔从后端实时拉取更新。

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