Dash 在浏览器重新加载时重新加载 pandas 数据框

Question

我创建了这个简单的 Dash 小应用程序，其中显示了 2 个图表。它有效，但我想在浏览器中重新加载页面时重新加载数据数据框，因为数据源每 5 分钟更新一次？

据我所知，我需要某种回调，有人有重新加载数据帧的例子吗？

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

data = pd.read_json("https://URL")
data["time"] = pd.to_datetime(data["time"], format="%Y-%m-%d %H:%M")
data.sort_values("time", inplace=True)

app = dash.Dash(__name__)

def serve_layout():
    return  html.Div(
    children=[
        html.H1(children="Vejr",),
        html.P(
            children="Vejret @G12A",
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["time"],
                        "y": data["temp_air_1"],
                        "type": "lines",
                        "name": "Air temp 1",
                    },
                    {
                        "x": data["time"],
                        "y": data["temp_air_2"],
                        "type": "lines",
                        "name": "Air temp 2",
                    },
                ],
                "layout": {"title": "Temperatur"},
            },
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["time"],
                        "y": data["humidity"],
                        "type": "lines",
                        "name": "Humidity (%)",
                    },

                ],
                "layout": {"title": "Humidity"},
            },
        ),
    ]
)

app.layout = serve_layout

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

Answer 1

虽然创建回调是一种可能的解决方案，但对于您的用例，我建议您简单地将数据加载移动到您的 serve_layout 函数中，即类似于

def serve_layout():
    # Load the data.
    data = pd.read_json("https://URL")
    data["time"] = pd.to_datetime(data["time"], format="%Y-%m-%d %H:%M")
    data.sort_values("time", inplace=True)
    # Render the layout.
    return  html.Div(...)

由于此函数是在页面加载时执行的，因此您将始终看到最新数据。

Answer 2

是的，对于真正的应用程序，您应该使用破折号 dcc.Interval (https://dash.plotly.com/live-updates)。该页面顶部有一个很好的示例，说明如何创建回调以重新加载资源（数据框）。

它允许您在您可以选择的时间间隔内更新可视化。重新加载页面是一项昂贵的操作，因此我不建议构建依赖它的应用程序。除非您的网页设计是动态的，否则我建议像示例中那样分离静态 html 代码，只使用回调重新加载可视化内容。

import datetime

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
from dash.dependencies import Input, Output



app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.H1(children="Vejr",),
        html.P(children="Vejret @G12A"),
        dcc.Graph( id= "graph1"),
        dcc.Graph( id= "graph2") 
    ]
)


# Multiple components can update everytime interval gets fired.
@app.callback(Output('graph1', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_graph_live(n):
    data = {...}

    # Create the graph
    fig = plotly.Figure(.....)

    return fig
    
@app.callback(Output('graph2', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_graph_live(n):
    data = {...}

    # Create the graph
    fig = plotly.Figure(.....)

    return fig


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

如果您不想构建一个真正的应用程序并且想要更简单的方法，那么您可以按照@emher 的建议进行操作。

Dash 在浏览器重新加载时重新加载 pandas 数据框

Dash reload pandas dataframe at browser reload

python

pandas

plotly-dash