绘制由一个滑块控制的两个子图

Question

在 plotly 尝试绘制全部由一个滑块控制的两个子图时遇到问题。这应该很简单，但我看不到让它工作。我一直在关注：https://plot.ly/python/sliders/ 和很多其他帖子，但似乎仍有问题。

我正在为两个子图的每一个使用两个 dfs，并试图让它随着滑块中的步长变化而改变哪一行是可见的。

这就是我要做的事情。第一次使用 plotly，如有任何帮助和建议，我们将不胜感激。

谢谢。

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()

Answer 1

Plotly 论坛的某个人回答了我的问题。这是我所做的。

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()

绘制由一个滑块控制的两个子图

Plotly two subplots controlled by one slider

python

numpy

pandas

plotly-dash

plotly-python