数据框的数据可以在这里找到:https://drive.google.com/file/d/19xeipiggi9ti51_gfjurcb9gkv4nr0db/viewi 希望我的下拉列表仅在打开href=“/”时显示,而不是在选择/page-1或任何其他页面时显示。
这就是我想要显示下拉列表的地方
我不想在这里显示下拉列表
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px
from dash.dependencies import Input, Output
df = pd.read_csv("intro_bees.csv")
df = df.groupby(['State', 'ANSI', 'Affected by', 'Year', 'state_code'])[['Pct of Colonies Impacted']].mean()
df.reset_index(inplace=True)
colorScales = px.colors.named_colorscales()
years = [{'label': str(y), 'value': y} for y in df.Year.unique()]
affected_by = [{'label': c, 'value': c} for c in df["Affected by"].unique()]
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
}
sidebar = html.Div(
[
html.H2("Eddies Project", className="display-4"),
html.Hr(),
html.P(
"Choose a Project", className="lead"
),
dbc.Nav(
[
# I want dropdowns to only be displayed only when href="/" is true
dbc.NavLink("Bee's Project", href="/", active="exact"),
dbc.NavLink("Page 1", href="/page-1", active="exact"),
dbc.NavLink("Page 2", href="/page-2", active="exact"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
# These are the dropdowns I'm talking about
dropdowns = html.Div([dcc.Dropdown(id="select_year",
options=years,
multi=False,
value=2015,
style={'width': "33.3%", "display": "inline-block", 'text-align': 'center'}
),
dcc.Dropdown(id="select_cause",
options=affected_by,
multi=False,
value="Disease",
style={'width': "33.3%", "display": "inline-block", 'text-align': 'center'}
),
dcc.Dropdown(id='colorScale',
options=[{"value": x, "label": x} for x in colorScales],
multi=False,
value='ylgn',
style={'width': "33.3%", "display": "inline-block", 'text-align': 'center'}
),
], style=CONTENT_STYLE)
# I'm completely aware that by putting them in this app.layout they will be displayed on every page I just dont know a way around this please help.
content = html.Div(id="page-content", children=[], style=CONTENT_STYLE)
app.layout = html.Div([
dcc.Location(id="url"),
sidebar,
dropdowns,
content
])
@app.callback(
Output("page-content", "children"),
[Input("url", "pathname"),
Input(component_id="select_year", component_property="value"),
Input(component_id="select_cause", component_property="value"),
Input(component_id="colorScale", component_property="value")
]
)
def render_page_content(pathname, year_selected, cause_selected, color_scale):
df_copy = df.copy()
df_copy = df_copy[df_copy["Year"] == year_selected]
df_copy = df_copy[df_copy["Affected by"] == cause_selected]
if pathname == "/":
return [
dcc.Graph(id='bargraph',
figure=px.choropleth(
data_frame=df_copy,
locationmode="USA-states",
locations="state_code",
scope="usa",
color="Pct of Colonies Impacted",
hover_data=["State", "Pct of Colonies Impacted"],
labels={"Pct of Colonies Impacted": "% affected"},
template="plotly_dark",
color_continuous_scale=color_scale,
title=f"Bee Colonies affected by {cause_selected} in the year {year_selected}"
))
]
elif pathname == "/page-1":
return [
html.H1('Grad School in Iran',
style={'textAlign': 'center'})
]
elif pathname == "/page-2":
return [
html.H1('High School in Iran',
style={'textAlign': 'center'})]
return dbc.Jumbotron(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
]
)
if __name__ == '__main__':
app.run_server(port=4050, debug=True)
暂无答案!
目前还没有任何答案,快来回答吧!