python - 添加基于 RadioItems 的下拉列表
问题描述
此代码工作正常。我可以根据 RadioItem 更新图形。我的仪表板现在没有下拉菜单,但我想总共添加 4 个下拉菜单。其中 2 个应该用于第一个 RadioItem,其中 2 个用于另一个 RadioItem。换句话说,当我添加下拉菜单时,我将第二次更新我的图表。我找不到这种情况的示例代码。这是我的代码:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots
pp_list=['pp1', 'pp2', 'pp3', 'pp4', 'pp5', 'pp6', 'pp7', 'pp8']
group_list=['gr1', 'gr2', 'gr3', 'gr4', 'gr5', 'gr6', 'gr7', 'gr8']
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Markdown('''**Choose to Compare:**'''),
dcc.RadioItems(
id='radio',
value='pp_basis',
options=[{'label': x, 'value': x}
for x in ['pp_basis', 'group_basis']]
),
dcc.Graph(id="graph"),
])
@app.callback(
Output("graph", "figure"),
[Input("radio", "value")])
def display_(radio_value):
fig = make_subplots(specs=[[{"secondary_y": True}]])
if radio_value == 'pp_basis':
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[2.1, 1.8, 1.3], name="pp1"),
)
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[1.9, 1.5, 0.8], name="pp2"),
)
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
secondary_y=True,
)
else:
fig.add_trace(
go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.5, 1.3, 1.38], name="gr1"),
)
fig.add_trace(
go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.3, 1.1, 1.18], name="gr2"),
)
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
secondary_y=True,
)
fig.update_layout(
title_text="Cost Analysis"
)
fig.update_xaxes(title_text="<b>Date</b>")
if radio_value == 'pp_basis':
fig.update_yaxes(
title_text="<b>Cost</b>",
)
else:
fig.update_yaxes(
title_text="<b>WACC</b>",
)
fig.update_yaxes(
title_text="<b>Secondary Axis</b>",
secondary_y=True)
return fig
app.run_server(debug=True)
我在代码中添加了两个列表,即 pp_list 和 group_list。我要设计的结果如下:
我怎样才能做到这一点?
解决方案
我对您的代码进行了以下更改:
- 在应用布局中创建了一个下拉项
- 使用这个新的下拉选项/值作为输出和单选项值作为输入创建了一个回调
- 调整图形创建者回调以使用下拉值作为输入
现在,基于单选项目选择,下拉选项被刷新。
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from plotly.subplots import make_subplots
pp_list=['pp1', 'pp2', 'pp3', 'pp4', 'pp5', 'pp6', 'pp7', 'pp8']
group_list=['gr1', 'gr2', 'gr3', 'gr4', 'gr5', 'gr6', 'gr7', 'gr8']
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Markdown('''**Choose to Compare:**'''),
dcc.RadioItems(
id='radio',
value='pp_basis',
options=[{'label': x, 'value': x}
for x in ['pp_basis', 'group_basis']]
),
dcc.Dropdown(id= 'dropdown'),
dcc.Graph(id="graph"),
])
@app.callback(
[Output('dropdown', 'options'),
Output('dropdown', 'value')],
Input('radio', 'value'))
def dropdown_options(radio_value):
if radio_value == 'pp_basis':
options = [{'label': x, 'value': x} for x in pp_list]
value = pp_list[0]
else:
options = [{'label': x, 'value': x} for x in group_list]
value = group_list[0]
return options, value
@app.callback(
Output("graph", "figure"),
[Input("dropdown", "value")])
#here you will define what the graph should look like based on the dropdown
def display_(dropdown_value):
fig = make_subplots(specs=[[{"secondary_y": True}]])
if dropdown_value.startswith('pp'):
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[2.1, 1.8, 1.3], name="pp1"),
)
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[1.9, 1.5, 0.8], name="pp2"),
)
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
secondary_y=True,
)
else:
fig.add_trace(
go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.5, 1.3, 1.38], name="gr1"),
)
fig.add_trace(
go.Bar(x=['2019-01', '2019-02', '2019-03'], y=[1.3, 1.1, 1.18], name="gr2"),
)
fig.add_trace(
go.Scatter(x=['2019-01', '2019-02', '2019-03'], y=[300, 271, 311], mode='markers', name="secondary axis"),
secondary_y=True,
)
fig.update_layout(
title_text="Cost Analysis"
)
fig.update_xaxes(title_text="<b>Date</b>")
if dropdown_value.startswith('pp'):
fig.update_yaxes(
title_text="<b>Cost</b>",
)
else:
fig.update_yaxes(
title_text="<b>WACC</b>",
)
fig.update_yaxes(
title_text="<b>Secondary Axis</b>",
secondary_y=True)
return fig
app.run_server(debug=True, port=5050, host='0.0.0.0')
推荐阅读
- android - Why does my Android Unit Test runs twice?
- metal - Turn off framerate on metal api for ios
- sql-server - SSRS: filter parameter passed to sub-report
- docker - Docker - ASP.CORE 2.2 应用程序和 SSH
- ios - 弹出到非大半透明栏时 UINavigationBar 大标题出现问题
- javascript - How to render view in react google map marker?
- c# - 无法使用信号器从控制器发送通知
- php - laravel 数据库播种器添加随机添加外键 id 到种子
- wordpress - 为什么 Woocommerce Paypal 访客结账不适用于我的客户,但使用 PayPal 帐户付款?
- pagespeed - google pagespeed见解面临的问题