Plotly 由一个 slider 控制的两个子图
[英]Plotly two subplots controlled by one slider
问题描述
Having a issue here with plotly trying to plot two subplots all controlled by one slider. 
plotly 尝试 plot 两个子图都由一个 slider 控制。 This should be pretty simple but I cant see to get it to work.这应该很简单，但我看不到让它工作。 I have been following: https://plot.ly/python/sliders/ and a lot of other posts but still seem to be having issues.我一直在关注： https://plot.ly/python/sliders/和许多其他帖子，但似乎仍然存在问题。
I am using two dfs for each of the two subplots plots and trying to get it to change which row will be visible with the step change in the slider.我为两个子图中的每一个都使用了两个 dfs，并试图通过 slider 中的步长改变来改变哪一行可见。
Here is where I am up to.这就是我要做的。 First time using plotly so any help and suggestions will be much appreciated.第一次使用 plotly 所以任何帮助和建议将不胜感激。
Thanks.谢谢。
import plotly
import plotly.graph_objects as go
import numpy as np
import pandas as pd
import plotly.express as px
from plotly.subplots import make_subplots
import chart_studio.plotly as py
df = pd.DataFrame({'A':[100, 120, 100, 105, 110],
'B':[130, 120, 100, 105, 110],
'C':[110, 110, 140, 115, 120],
'D':[140, 120, 160, 120, 130],
'E':[150, 130, 100, 105, 150]})
df2 = pd.DataFrame({'A':[140, 150, 110, 115, 120],
'B':[150, 120, 100, 105, 110],
'C':[120, 120, 110, 115, 120],
'D':[170, 140, 120, 125, 150],
'E':[140, 180, 115, 115, 140]})
fig = make_subplots(rows=2, cols=1,shared_xaxes=True)
# Add traces, one for each slider step
for step in range(len(df.index)):
fig.append_trace(
go.Scatter(
visible=False,
line=dict(color="#00CED1", width=2),
name="Time = " + str(step),
x=df.columns[0:],
y=df.loc[step]),row=1, col=1)
#for step in range(len(df2.index)): Tried this does not work
fig.append_trace(
go.Scatter(
visible=False,
line=dict(color="red", width=2),
name="Time = " + str(step),
x=df2.columns[0:],
y=df2.loc[step]),row=2, col=1)
fig.data[1].visible = True
# Create and add slider
steps = []
for i in range(len(df.index)):
step = dict(method="restyle",
args=["visible", [False] * len(fig.data)],
)
step["args"][1][i] = True
#step["args"][1][i+1] = True # This shows them both but still not correct (different row numbers)
steps.append(step)
sliders = [dict(
active=0,
currentvalue={"prefix": "Time: "},
pad={"t": 50},
steps=steps
)]
fig.update_yaxes(title_text="Temperature", range=[-160, 260],nticks=30, row=1, col=1)
fig.update_yaxes(title_text="Pressure", range=[-169, 260],nticks=30, row=2, col=1)
fig.update_layout(sliders=sliders, title="Time Series - Interactive", template ="plotly_white")
fig.update_layout(width=800,height=600,)
fig.show()
1 个解决方案
解决方案1
2 已采纳 2019-11-15 07:09:44
Some one from the Plotly Forums answered my Question. Plotly 论坛中的一些人回答了我的问题。 Here is what I did.这就是我所做的。
import plotly
import plotly.graph_objects as go
import numpy as np
import pandas as pd
import plotly.express as px
from plotly.subplots import make_subplots
import chart_studio.plotly as py
import random
df = pd.DataFrame({'A':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'B':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'C':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'D':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'E':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'F':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'G':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'H':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'I':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'J':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'K':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'L':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'M':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'N':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'O':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'P':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)]
})
df2 = pd.DataFrame({'A':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'B':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'C':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'D':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'E':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'F':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'G':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'H':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'I':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'J':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'K':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'L':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'M':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'N':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'O':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)],
'P':[random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200),random.randint(1,200)]
})
fig = make_subplots(rows=2, cols=1,shared_xaxes=True,vertical_spacing = 0.25)
# Add traces, one for each slider step
for step in range(len(df.index)):
fig.append_trace(
go.Scatter(
visible=False,
line=dict(color="#00CED1", width=2),
name="Time = " + str(step),
x=df.columns[0:],
y=df.loc[step]),row=1, col=1)
#for step in range(len(df2.index)):# Tried this does not work
fig.append_trace(
go.Scatter(
visible=False,
line=dict(color="red", width=2),
name="Time = " + str(step),
x=df2.columns[0:],
y=df2.loc[step]),row=2, col=1)
# Create and add slider
steps = []
for i in range(0, len(fig.data), 2):
step = dict(
method="restyle",
args=["visible", [False] * len(fig.data)],
)
step["args"][1][i:i+2] = [True, True]
steps.append(step)
sliders = [dict(
active=0,
currentvalue={"prefix": "Time: "},
pad={"t": 50},
steps=steps
)]
fig.update_yaxes(title_text="Temperature", range=[-160, 260],nticks=30, row=1, col=1)
fig.update_yaxes(title_text="Pressure", range=[-169, 260],nticks=30, row=2, col=1)
fig.update_layout(sliders=sliders, title="Time Series - Interactive", template ="plotly_white")
plotly.offline.plot(fig, filename='name.html')
fig.show()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在 plotly 中添加一个带有子图的滑块 - Adding a slider to figure with subplots in plotly
单个 slider 用于多个 plotly 子图 - Single slider for multiple plotly subplots
Plotly中的子图-袖扣：如何将两个子图放在同一图中 - Subplots in Plotly - Cufflinks: How to put two subplots in the same plot
Plotly：两行子图中的刻度标签问题 - Plotly: ticklabels problem in subplots with two rows
在一个图中绘制两个子图 - Plotting two subplots in one figure
将两个图合并成一个图，在 plotly 中有两个子图 - Merge two plots into a single figure with two subplots in plotly
plotly 子图的 Colspan 问题 - 适用于跨越两列，但不是三列 - Colspan issue with plotly subplots - works with spanning across two columns, but not three
Plotly：如何在两个子图上使用相同的配色方案？ - Plotly: How to use the same color scheme on two subplots?
如何使用Plotly制作两个下拉菜单来控制子图 - How to use Plotly to make two dropdown menus to control the subplots
Plotly：将具有多个子图的图形添加到一个图形中 - Plotly: Add figures with multiple subplots to one single figure
相关标签