如何使用Plotly制作两个下拉菜单来控制子图

Question

我正在制作具有子情节1和子情节2的情节。子图1是股价图，子图2是指数图。我想把每只股票和每个指数一一比较。因此，我打算制作两个下拉菜单，其中一个控制子情节1，另一个控制子情节2。

ash=JupyterDash(__name__)
stocks=['stock1','stock2']
indexs = ['index1', 'index2']
fig=go.Figure()
dash.layout = html.Div([dcc.Graph(id = 'plot', figure = fig), 
html.P([html.Label("stocks"),
dcc.Dropdown(id='stock', 
options=[{'label': i, 'value': i} for i in stocks], 
value=stocks[0])], 
[html.Label("indexs"), 
dcc.Dropdown(id='index', 
options=[{'label': i, 'value': i} for i in indexs], 
value=labels[0])], style={'width': '80%', 
'padding-left':'4%',
'padding-right': '14%',
'display': 'inline block', 
'align-items': 'center', 
'justify-content': 'center'})])


@dash.callback(Output('plot', 'figure'),
[Input('stock', 'value'),
Input('index', 'value')])
def update_figure(X,Y):

if X=='stock1':
fig1=make_subplots(rows=2, cols=1)
fig1.add_trace(go.Scatter(x = list(stock1['date']), y = list(stock1['price'])), row=1, col=1)

if Y=='index1':
fig1.add_trace(go.Candlestick(x=index1['date'],
open=index1['open'],
high=index1['high'],
low=index1['low'],
close=index1['close']), row=2, col=1)

fig1.update_layout(xaxis2_rangeslider_visible=False)

if Y=='index2':
fig1.add_trace(go.Candlestick(x=index2['date'],
open=index2['open'],
high=index2['high'],
low=index2['low'],
close=index2['close']), row=2, col=1)

fig1.update_layout(xaxis2_rangeslider_visible=False)

return fig1

if X=='stock2':
.... #same format

dash.run_server(mode='inline')     

它不工作;请帮帮我!

Answer 1

• 你的破折号有多个问题． 已经修复了这些问题，并重新格式化，使其更具可读性
你的<<li> strong>调基本上是可以的，但是如果您的数据结构适当，则不需要重复条件代码。为了演示，我使用了yfinance数据，并按代码进行结构化分组

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import yfinance as yf
import datetime as dt
stocks=['SPY','AAPL', "MSFT"]
data = yf.download(" ".join(stocks), start="2020-01-01", end=dt.datetime.today(), group_by="ticker")
indexs = ["^DJI", "^GSPC", "^IXIC", "^NYA"]
idx = yf.download(" ".join(indexs), start="2020-01-01", end=dt.datetime.today(), group_by="ticker")
dash = JupyterDash(__name__)
fig = go.Figure()
dash.layout = html.Div(
[
dcc.Graph(id="plot", figure=fig),
html.P(
[
html.Label("stocks"),
dcc.Dropdown(
id="stock",
options=[{"label": i, "value": i} for i in stocks],
value=stocks[0],
),
html.Label("indexs"),
dcc.Dropdown(
id="index",
options=[{"label": i, "value": i} for i in indexs],
value=indexs[0],
),
]
),
],
style={
"width": "80%",
"padding-left": "4%",
"padding-right": "14%",
"display": "inline block",
"align-items": "center",
"justify-content": "center",
},
)

@dash.callback(
Output("plot", "figure"), [Input("stock", "value"), Input("index", "value")]
)
def update_figure(X, Y):
fig = make_subplots(rows=2, cols=1)
fig.add_trace(go.Scatter(x=data[X].index, y=data[X]["Close"], name=X), row=1, col=1)
fig.add_trace(
go.Candlestick(
x=idx[Y].index,
open=idx[Y]["Open"],
high=idx[Y]["High"],
low=idx[Y]["Low"],
close=idx[Y]["Close"],
name=Y,
),
row=2,
col=1,
)
return fig

dash.run_server(mode="inline")