如何从dcc保存和访问多个数据帧。存储在plotly dash中

2024-04-25 20:03:00 发布

您现在位置:Python中文网/ 问答频道 /正文

全部,

我进入了plotly dash,从文档和SO社区获得了一些很好的指导。真的很感谢你。遇到一个问题,我不确定文档中是否清楚,因此如果社区中的任何人都能提供一些指导,那就太好了。以下是我到目前为止的情况:

# Import required libraries
import dash
import math
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH


# App Begins
app = dash.Dash(
    __name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}],
)
app.title = "Tool"
server = app.server

# Create global chart template
mapbox_access_token = "pk.eyJ1IjoicGxvdGx5bWFwYm94IiwiYSI6ImNrOWJqb2F4djBnMjEzbG50amg0dnJieG4ifQ.Zme1-Uzoi75IaFbieBDl3A"

layout = dict(
    autosize=True,
    automargin=True,
    margin=dict(l=30, r=30, b=20, t=40),
    hovermode="closest",
    plot_bgcolor="#F9F9F9",
    paper_bgcolor="#F9F9F9",
    legend=dict(font=dict(size=10), orientation="h"),
    title="Satellite Overview",
    mapbox=dict(
        accesstoken=mapbox_access_token,
        style="light",
        center=dict(lon=-78.05, lat=42.54),
        zoom=7,
    ),
)

# Create app layout
app.layout = html.Div(
    [
        dcc.Store(id="aggregate_data"),
        # empty Div to trigger javascript file for graph resizing
        html.Div(id="output-clientside"),
        html.Div(
            [
                html.Div(
                    [
                        html.Img(
                            src=app.get_asset_url("dash-logo.png"),
                            id="plotly-image",
                            style={
                                "height": "60px",
                                "width": "auto",
                                "margin-bottom": "25px",
                            },
                        )
                    ],
                    className="one-third column",
                ),
                html.Div(
                    [
                        html.Div(
                            [
                                html.H3(
                                    "Dash Tool",
                                    style={"margin-bottom": "0px"},
                                ),
                            ]
                        )
                    ],
                    className="one-half column",
                    id="title",
                ),
            ],
            id="header",
            className="row flex-display",
            style={"margin-bottom": "25px"},
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.P("Quantity 1:", className="control_label"),
                        dcc.Input(
                           id="quantity_1",
                           type="number",
                           placeholder=33.
                        ),
                        html.P("Quantity 2:", className="control_label"),
                        dcc.Input(
                            id="quantity_2",
                            type="number",
                            placeholder=-115.
                        ),
                        html.P("Number of Drop Downs:", className="control_label"),
                        dcc.Slider(
                            id="drop_downs",
                            min=2,
                            max=10,
                            value=2,
                            step=1.0,
                            className="dcc_control",
                        ),
                        html.P("Load Inputs:", className="control_label"),
                        dcc.Checklist(
                            id='sources_flag',
                            options=[
                                {'label': 'Yes', 'value': 'Y'},
                            ],
                            value=['Y'],
                            labelStyle={'display': 'inline-block'}
                        ),
                        html.Div(id='source_dropdown_container', children=[]),
                        html.Div(id='source_dropdown_container_output'),
                        html.Div(id='source_file_container', children=[]),
                        html.Div(id='source_file_container_output'),
                    ],
                    className="pretty_container four columns",
                    id="cross-filter-options",
                ),
            ],
            className="row flex-display",
        ),
    ],
    id="mainContainer",
    style={"display": "flex", "flex-direction": "column"},
)


# Create callbacks
@app.callback(
    Output(component_id='source_dropdown_container_output', component_property='children'),
    [
        Input(component_id='drop_downs', component_property='value'),
        Input(component_id='sources_flag', component_property='value'),
    ]
)
def update_source_dropdowns(value, value_1):
    """Controls the number of drop-downs available to choose sources"""
    print("cb", value, value_1)
    if value_1 == ['Y']:
        children = []
        for i in range(0, value):
            new_dropdown = html.Div(
                dcc.Upload(
                    id={'index': f'''meteo_source_dropdown_{str(value_1)}''', 'type': 'dynamic-dropdown'},
                    children=html.Div([
                        (html.Button('Upload File')),
                    ])
                )
            )
            children.append(new_dropdown)
        print(children)
        print(type(children))
        return children


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

当用户单击每个文件上载按钮并上载一个新文件(很可能是csv)时,我如何根据需要存储并检索它们,而不丢失dcc.store中的标识?我的意思是,如果在从dcc.Store检索数据时,第一次单击按钮就上传了数据集,那么我想知道该数据集与哪个单击相关。事先非常感谢您的帮助


Tags: importdividappsourcevaluecontainerhtml