为 Plotly 创建下拉菜单

Question

我有一张如下所示的表格：

日期	类型	值_1	价值_2
1/1	一个	1	10
1/2	一个	5	3
1/3	一个	6	12
1/1	乙	4	7
1/2	乙	10	5
1/3	乙	6	15
1/1	C	16	8
1/2	C	8	11
1/3	C	1	5

我想为类型 A、B 和 C 绘制一个交互式图表，以便“日期”列位于 x 轴上，而“值_1”和“值_2”都位于一个图中的 y 轴上。

我目前编写的代码如下； 我已经使用 Plotly 到 plot A 型的 value_1 和 value_2 在同一个 plot 上，日期为 x 轴。

# Change Type (A, B, and C)
type_graph = 'A'

# Plot Graph
fig = px.line(df[df['type'] == type_graph ],
              x='date', y=['value_1', 'value_2')

fig.update_layout(
    title="Value graph",
    xaxis_title="Date",
    yaxis_title="Value_1 vs Value_2",
    legend_title="Value Type",
)

fig.show()

我想添加下拉菜单，以便可以更改为查看类型 B 和 C。 因此，我无需更改“type_graph”，只需单击下拉菜单到 select 我想查看的“类型”。 此外，我希望将 value_1 和 value_2 绘制在同一张图上。 因此，我只会选择“类型”A、B 或 C 来相应地查看 value_1 和 value_2。

Answer 1

通过将图形的显示/隐藏与类型相关联来实现所需的按钮行为。 因此，根据您的数据，绘制 value_1 图表和 value_2 图表并将它们分组。 设置要显示的初始图形并确保它们都显示出来。 接下来，在列表中指定按钮是否应显示或隐藏为按钮的 function。 在这种情况下，有两个图，所以会有两个隐藏。 请参阅此处的参考资料。

import plotly.graph_objects as go

fig = go.Figure()

for t in df['type'].unique():
    dff = df[df['type'] == t]
    fig.add_trace(go.Scatter(
        x=dff.date,
        y=dff['value_1'],
        name='value_1',
        legendgroup=t,
        legendgrouptitle=dict(text=t),
        visible=True,
    ))
    fig.add_trace(go.Scatter(
        x=dff.date,
        y=dff['value_2'],
        name='value_2',
        legendgroup=t,
        legendgrouptitle=dict(text=t),
        visible=True,
    ))

fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(label="All",
                     method="update",
                     args=[{"visible": [True, True, True, True, True, True]}]),
                dict(label="Type_A",
                     method="update",
                     args=[{"visible": [True, True, False, False, False, False]}]),
                dict(label="Type_B",
                     method="update",
                     args=[{"visible": [False, False, True, True, False, False]}]),
                dict(label="Type_C",
                     method="update",
                     args=[{"visible": [False, False, False, False, True, True]}]),
            ]),
        )
    ])

fig.update_layout(
    autosize=True,
    height=400,
    title="Value graph",
    xaxis_title="Date",
    yaxis_title="Value_1 vs Value_2",
    #legend_title="Value Type",
)
fig.show()