Plotly Dash 多个 Yaxis 堆叠在面板中
Plotly Dash Multiple Yaxis stacked in panels
我正在尝试使用 Plotly/Dash 开发交互式仪表板。主要功能是:
- (1)是呈现多个图表,
- (2) 具有相同的 x 轴(时间序列),
- (3) 其中基础数据和特定 traces/lines 都可以使用回调进行交互式调整。
功能 (3) 没问题,所以我不会在我的描述中进一步包含。但是,(1) & (2) 我无法上班。
总结一下我到目前为止为 (1) 和 (2) 所做的工作:
我。创建跟踪应该在哪个图表中的跟踪(即 trace_01 & yaxis='y'、trace_02 & yaxis='y2' 等);
二。指定 yaxis、yaxis2、yaxis3 等。
三。生成 dash 应用程序的其余部分,作为标准(即 go.Figure(data=data, layout=layout),dash.Dash() 等)。
问题是我无法在具有相同 x 轴的两个(或更多)图表(即 y 轴)上获得多于一组的轨迹。我无法让它工作。
核心问题代码:
# Set Traces/Data
t0101 = go.Scatter(x=df_fx.date, y=df_fx['close'],mode='lines',name='close',yaxis='y')
t0201 = go.Scatter(x=df_fx.date, y=df_fx['adx'],mode='lines',name='adx',yaxis='y2')
data = [t0101,t0201]
# Specify Layout
layout= go.Layout(
xaxis= dict(side= 'bottom', anchor= 'y2'),
yaxis= dict(side= 'right'),
yaxis2= dict(side='left'),)
# Call Figure
fig = go.Figure(data=data, layout=layout)
# Create App
app = dash.Dash()
app.layout = html.Div([dcc.Graph(id='chart', figure=fig)])
此代码生成以下输出:
output from code
我真正想要实现的是仪表板输出,例如:
required output
重要的是解决方案可以支持功能 (3),例如更改基础数据(相同的数据用于所有 charts/y-axis),或者在图表上的各种轨迹之间切换.
注意,功能(3)的代码从上面的代码中排除了这个。主要问题是我无法使用功能 (1) 和 (2)。
我已经广泛搜索了所有文档和所有堆栈问题。其中大部分涉及多个 yaxis 但 overlay='y',我不想要这个解决方案。
如果这个问题已经被回答或记录在别处,我深表歉意,但我找不到为什么我的实施不会输出所需的多轴图表。
非常感谢任何建议、技巧和错误。在这个问题上花费了太多 hours/nights 之后,这真的是我最后的选择。
Appendix 1: Input data sample
附录 2:Link to data (csv)
附录 3:Link to data (xlsx)
附录 4:完整代码:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import datetime as dt
### Input Data_____________________________________________
# Extract
p_fx = 'AUD_NZD'
p_dir = "C:/Users/Gebruiker/Gen_Inds_"
p_file = p_dir + p_fx + ".csv"
df_0 = pd.read_csv(p_file,skiprows=1)
df_1 = pd.DataFrame(df_0.loc[df_0['AUD_NZD']=='AUD_NZD',['AUD_NZD','datetime','open','high','low','close','sma','sma.1','hma','hma.1','kama','kama.1','adx','aroonup', 'aroondown']])
# Prepare
df_1 = df_1.rename(columns={'AUD_NZD': "Pair",
"sma":"sma_s","sma.1":"sma_f",
"hma":"hma_s","hma.1":"hma_f",
"kama":"kama_s","kama.1":"kama_f",
})
df_1['datetime'] = df_1['datetime'].str.rstrip('.999989')
df_2 = df_1.astype({'datetime':'datetime64[ns]'})
df_2['date'] = pd.to_datetime(df_2['datetime'].dt.date, format='%Y-%m-%d')
# Input data
df_fx = pd.DataFrame(df_2[['date','Pair','open','high','low','close','sma_s','sma_f','hma_s','hma_f','kama_s','kama_f','adx','aroonup', 'aroondown']])
print(df_fx.Pair.value_counts())
### Figure_____________________________________________
# Data
t0101 = go.Scatter(x=df_fx.date, y=df_fx['close'],mode='lines',name='close',yaxis='y')
t0201 = go.Scatter(x=df_fx.date, y=df_fx['adx'],mode='lines',name='adx',yaxis='y2')
data = [t0101,t0201]
# Layout
layout= go.Layout(
xaxis= dict(side= 'bottom', anchor= 'y2'),
yaxis= dict(side= 'right'),
yaxis2= dict(side='left'),
)
# Figure
fig = go.Figure(data=data, layout=layout)
### App_____________________________________________
app = dash.Dash()
app.layout = html.Div([
dcc.Graph(id='chart', figure=fig)
])
### End_____________________________________________
if __name__ == '__main__':
app.run_server()
附录 4:部分解决方案(在要求 #3 的回调中实现的堆叠图表)
# add the relevant sub-charts / traces to the fig.
fig = psp.make_subplots(rows=2, cols=1)
fig.append_trace(go.Scatter(x=df_fx.date, y=df_fx.close ,mode='lines',name='close'),
row=1, col=1)
fig.append_trace(go.Scatter(x=df_fx.date, y=df_fx.sma_s ,mode='lines',name='sma_s'),
row=1, col=1)
fig.append_trace(go.Scatter(x=df_fx.date, y=df_fx.adx ,mode='lines',name='adx'),
row=2, col=1)
fig.update_layout(height=600, title_text="Close and ADX")
附录 5:Solution output
您需要使用的功能是sub-plots。这是你的数字(随机生成的数据——在你将 CSV 文件添加到问题之前创建)。
# some fake data (use your CSV instead)
dates = pd.date_range(start = "2020-01-01", end = "2020-06-01", freq="1D")
close = np.random.uniform(90, 110, len(dates))
adx = np.random.uniform(190, 210, len(dates))
# important part - use sub-plots.
fig = make_subplots(rows=2, cols=1)
# add the relevant sub-charts / traces to the fig.
fig.append_trace(go.Scatter(x=dates, y=close ,mode='lines',name='close'),
row=1, col=1)
fig.append_trace(go.Scatter(x=dates, y=adx ,mode='lines',name='adx'),
row=2, col=1)
fig.update_layout(height=600, title_text="Close and ADX")
结果是:
我正在尝试使用 Plotly/Dash 开发交互式仪表板。主要功能是:
- (1)是呈现多个图表,
- (2) 具有相同的 x 轴(时间序列),
- (3) 其中基础数据和特定 traces/lines 都可以使用回调进行交互式调整。
功能 (3) 没问题,所以我不会在我的描述中进一步包含。但是,(1) & (2) 我无法上班。
总结一下我到目前为止为 (1) 和 (2) 所做的工作:
我。创建跟踪应该在哪个图表中的跟踪(即 trace_01 & yaxis='y'、trace_02 & yaxis='y2' 等);
二。指定 yaxis、yaxis2、yaxis3 等。
三。生成 dash 应用程序的其余部分,作为标准(即 go.Figure(data=data, layout=layout),dash.Dash() 等)。
问题是我无法在具有相同 x 轴的两个(或更多)图表(即 y 轴)上获得多于一组的轨迹。我无法让它工作。
核心问题代码:
# Set Traces/Data
t0101 = go.Scatter(x=df_fx.date, y=df_fx['close'],mode='lines',name='close',yaxis='y')
t0201 = go.Scatter(x=df_fx.date, y=df_fx['adx'],mode='lines',name='adx',yaxis='y2')
data = [t0101,t0201]
# Specify Layout
layout= go.Layout(
xaxis= dict(side= 'bottom', anchor= 'y2'),
yaxis= dict(side= 'right'),
yaxis2= dict(side='left'),)
# Call Figure
fig = go.Figure(data=data, layout=layout)
# Create App
app = dash.Dash()
app.layout = html.Div([dcc.Graph(id='chart', figure=fig)])
此代码生成以下输出: output from code
我真正想要实现的是仪表板输出,例如: required output
重要的是解决方案可以支持功能 (3),例如更改基础数据(相同的数据用于所有 charts/y-axis),或者在图表上的各种轨迹之间切换.
注意,功能(3)的代码从上面的代码中排除了这个。主要问题是我无法使用功能 (1) 和 (2)。
我已经广泛搜索了所有文档和所有堆栈问题。其中大部分涉及多个 yaxis 但 overlay='y',我不想要这个解决方案。
如果这个问题已经被回答或记录在别处,我深表歉意,但我找不到为什么我的实施不会输出所需的多轴图表。
非常感谢任何建议、技巧和错误。在这个问题上花费了太多 hours/nights 之后,这真的是我最后的选择。
Appendix 1: Input data sample
附录 2:Link to data (csv)
附录 3:Link to data (xlsx)
附录 4:完整代码:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import datetime as dt
### Input Data_____________________________________________
# Extract
p_fx = 'AUD_NZD'
p_dir = "C:/Users/Gebruiker/Gen_Inds_"
p_file = p_dir + p_fx + ".csv"
df_0 = pd.read_csv(p_file,skiprows=1)
df_1 = pd.DataFrame(df_0.loc[df_0['AUD_NZD']=='AUD_NZD',['AUD_NZD','datetime','open','high','low','close','sma','sma.1','hma','hma.1','kama','kama.1','adx','aroonup', 'aroondown']])
# Prepare
df_1 = df_1.rename(columns={'AUD_NZD': "Pair",
"sma":"sma_s","sma.1":"sma_f",
"hma":"hma_s","hma.1":"hma_f",
"kama":"kama_s","kama.1":"kama_f",
})
df_1['datetime'] = df_1['datetime'].str.rstrip('.999989')
df_2 = df_1.astype({'datetime':'datetime64[ns]'})
df_2['date'] = pd.to_datetime(df_2['datetime'].dt.date, format='%Y-%m-%d')
# Input data
df_fx = pd.DataFrame(df_2[['date','Pair','open','high','low','close','sma_s','sma_f','hma_s','hma_f','kama_s','kama_f','adx','aroonup', 'aroondown']])
print(df_fx.Pair.value_counts())
### Figure_____________________________________________
# Data
t0101 = go.Scatter(x=df_fx.date, y=df_fx['close'],mode='lines',name='close',yaxis='y')
t0201 = go.Scatter(x=df_fx.date, y=df_fx['adx'],mode='lines',name='adx',yaxis='y2')
data = [t0101,t0201]
# Layout
layout= go.Layout(
xaxis= dict(side= 'bottom', anchor= 'y2'),
yaxis= dict(side= 'right'),
yaxis2= dict(side='left'),
)
# Figure
fig = go.Figure(data=data, layout=layout)
### App_____________________________________________
app = dash.Dash()
app.layout = html.Div([
dcc.Graph(id='chart', figure=fig)
])
### End_____________________________________________
if __name__ == '__main__':
app.run_server()
附录 4:部分解决方案(在要求 #3 的回调中实现的堆叠图表)
# add the relevant sub-charts / traces to the fig.
fig = psp.make_subplots(rows=2, cols=1)
fig.append_trace(go.Scatter(x=df_fx.date, y=df_fx.close ,mode='lines',name='close'),
row=1, col=1)
fig.append_trace(go.Scatter(x=df_fx.date, y=df_fx.sma_s ,mode='lines',name='sma_s'),
row=1, col=1)
fig.append_trace(go.Scatter(x=df_fx.date, y=df_fx.adx ,mode='lines',name='adx'),
row=2, col=1)
fig.update_layout(height=600, title_text="Close and ADX")
附录 5:Solution output
您需要使用的功能是sub-plots。这是你的数字(随机生成的数据——在你将 CSV 文件添加到问题之前创建)。
# some fake data (use your CSV instead)
dates = pd.date_range(start = "2020-01-01", end = "2020-06-01", freq="1D")
close = np.random.uniform(90, 110, len(dates))
adx = np.random.uniform(190, 210, len(dates))
# important part - use sub-plots.
fig = make_subplots(rows=2, cols=1)
# add the relevant sub-charts / traces to the fig.
fig.append_trace(go.Scatter(x=dates, y=close ,mode='lines',name='close'),
row=1, col=1)
fig.append_trace(go.Scatter(x=dates, y=adx ,mode='lines',name='adx'),
row=2, col=1)
fig.update_layout(height=600, title_text="Close and ADX")
结果是: