如何解决如何在 Plotly Dash 应用程序中配置对卡片的回调
我正在使用 Plotly Dash 创建一个基于 Python 的 COVID19 仪表板。我想在页面顶部附近放置一些卡片,显示根据下拉菜单的选择更新的人口/病例/死亡 KPI。我对如何配置回调部分以使卡片具有反应性感到有些困惑。
这是我目前的代码:
#Import packages
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import plotly.express as px
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input,Output
#Read in data and manipulate
who_data = pd.read_csv("https://covid19.who.int/WHO-COVID-19-global-data.csv")
pops = pd.read_csv("https://gist.githubusercontent.com/curran/0ac4077c7fc6390f5dd33bf5c06cb5ff/raw/605c54080c7a93a417a3cea93fd52e7550e76500/UN_Population_2019.csv")
pops = pops[['Country','2020']]
pops['2020'] = pops['2020']*1000
who_data.rename(columns={'New_cases': 'New Cases','Cumulative_cases': 'Cumulative Cases','New_deaths': 'New Deaths','Cumulative_deaths': 'Cumulative Deaths'},inplace=True)
country_choices=who_data['Country'].unique()
metric_choices=who_data.columns[4:]
#Initialize graph
fig = px.line(who_data,x="Date_reported",y="New Cases")
#Define cards
card1 = dbc.Card([
dbc.CardBody([
html.H4("Card title",className="card-title",id="card_num1"),html.P("Current Population",className="card-text",id="card_text1")
])
],style={'display': 'inline-block','width': '33.3%','text-align': 'center','color':'white','background-color': 'rgba(37,150,190)'},outline=True)
card2 = dbc.Card([
dbc.CardBody([
html.H4("Card title",id="card_num2"),html.P("This is some card text",id="card_text2")
]
)],outline=True)
card3 = dbc.Card([
dbc.CardBody([
html.H4("Card title",id="card_num3"),id="card_text3")
]
)],outline=True)
#Define app layout
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
dcc.Tabs([
dcc.Tab(label='Country',value='tab-1',style=tab_style,selected_style=tab_selected_style,children=[
html.Div([
dcc.Dropdown(
id='dropdown1',options=[{'label': i,'value': i} for i in country_choices],value=country_choices[0]
)
],style={'width': '50%','display': 'inline-block','text-align': 'center'}
),html.Div([
dcc.Dropdown(
id='dropdown2','value': i} for i in metric_choices],value=metric_choices[0]
)],html.Div([
card1,card2,card3
]),html.Div([
dcc.Graph(figure=fig,id='country_plot')
])
]),dcc.Tab(label='Spread',value='tab-2',children=[
html.P('Some stuff will go here eventually.')
])
])
])
# @app.callback(
# Output('card_num1','children'),# Output('card_num2',# Output('card_num3',# Output('card_text1',# Output('card_text2',# Output('card_text3',# Input('dropdown1','value')
# )
# def update_cards(country_select):
# new_df = who_data[(who_data.Country==country_select)]
# c_pop = pops[pops.Country==country_select]['2020'].unique()[0]
# card1 = dbc.Card([
# dbc.CardBody([
# html.H4(c_pop,# html.P(f"Current Population of {country_select}",className="card-text")
# ])
# ],# style={'display': 'inline-block',# 'width': '33.3%',# 'text-align': 'center',# 'background-color': 'rgba(37,# outline=True)
@app.callback(
Output('country_plot','figure'),Input('dropdown1','value'),Input('dropdown2','value'))
def update_figure(country_select,metric_select):
new_df = who_data[(who_data.Country==country_select)]
country_df = pops[pops.Country==country_select]
fig = px.line(new_df,y=metric_select,title=f'<b>{metric_select} of COVID19 for {country_select}</b>',color_discrete_sequence = ["red"],labels=dict(Date_reported="Date")
)
fig.update_traces(mode='markers+lines',marker=dict(color="black",size=3),line=dict(width=2))
fig.update_layout(title={'x':0.5,'xanchor': 'center','yanchor': 'top'})
return fig
app.run_server(host='0.0.0.0',port='8050')
我注释掉了让我感到困惑的 @app.callback
部分。不知道如何继续,也无法在网上找到任何这样做的例子。或者至少是任何使他们的代码可用的。
有人可以帮我指明正确的方向吗?任何帮助,将不胜感激!谢谢!
解决方法
你差不多就明白了。您需要将多个输出包装在一个列表中,并且回调应该 return
一个与您的输出数量相同长度的元组或列表。
@app.callback(
[
Output('card_num1','children'),Output('card_num2',Output('card_num3',Output('card_text1',Output('card_text2',Output('card_text3',],Input('dropdown1','value')
)
def update_cards(country_select):
# perform some logic here
return output_1,output_2,output_3,output_4,output_5,output_6
# these variable names can be whatever you want
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。