如何根据类型和不同列在绘图中包含多个过滤按钮？

Question

我试图包含多个下拉菜单，以便用户可以自定义所看到的内容。到目前为止，我已经成功地根据类型进行过滤，它要么显示所有类型的月增长率，要么显示所选类型的增长率。数据如下：

df = {'date': {0: '2018-01-01', 1: '2018-02-01', 2: '2018-03-01', 3: '2018-04-01', 4: '2018-05-01', 5: '2018-06-01', 6: '2018-07-01', 7: '2018-08-01', 8: '2018-09-01', 9: '2018-10-01', 10: '2018-11-01', 11: '2018-12-01', 12: '2019-01-01', 13: '2019-02-01', 14: '2019-03-01', 15: '2019-04-01', 16: '2019-05-01', 17: '2019-06-01', 18: '2019-07-01', 19: '2019-08-01', 20: '2019-09-01', 21: '2019-10-01', 22: '2019-11-01', 23: '2019-12-01', 24: '2018-01-01', 25: '2018-02-01', 26: '2018-03-01', 27: '2018-04-01', 28: '2018-05-01', 29: '2018-06-01', 30: '2018-07-01', 31: '2018-08-01', 32: '2018-09-01', 33: '2018-10-01', 34: '2018-11-01', 35: '2018-12-01', 36: '2019-01-01', 37: '2019-02-01', 38: '2019-03-01', 39: '2019-04-01', 40: '2019-05-01', 41: '2019-06-01', 42: '2019-07-01', 43: '2019-08-01', 44: '2019-09-01', 45: '2019-10-01', 46: '2019-11-01', 47: '2019-12-01'}, 

    'type': {0: 'A', 1: 'A', 2: 'A', 3: 'A', 4: 'A', 5: 'A', 6: 'A', 7: 'A', 8: 'A', 9: 'A', 10: 'A', 11: 'A', 12: 'A', 13: 'A', 14: 'A', 15: 'A', 16: 'A', 17: 'A', 18: 'A', 19: 'A', 20: 'A', 21: 'A', 22: 'A', 23: 'A', 24: 'B', 25: 'B', 26: 'B', 27: 'B', 28: 'B', 29: 'B', 30: 'B', 31: 'B', 32: 'B', 33: 'B', 34: 'B', 35: 'B', 36: 'B', 37: 'B', 38: 'B', 39: 'B', 40: 'B', 41: 'B', 42: 'B', 43: 'B', 44: 'B', 45: 'B', 46: 'B', 47: 'B'}, 'total_transactions': {0: 3848, 1: 8137, 2: 3329, 3: 7896, 4: 5832, 5: 3766, 6: 5864, 7: 7411, 8: 7908, 9: 7579, 10: 7386, 11: 7583, 12: 6593, 13: 5506, 14: 7091, 15: 6422, 16: 8724, 17: 4268, 18: 7052, 19: 6231, 20: 5329, 21: 2581, 22: 4248, 23: 2602, 24: 3854, 25: 8231, 26: 5238, 27: 8678, 28: 1580, 29: 4596, 30: 4334, 31: 3872, 32: 5360, 33: 5993, 34: 8358, 35: 8664, 36: 6538, 37: 7030, 38: 7177, 39: 9669, 40: 7506, 41: 4146, 42: 5137, 43: 7325, 44: 9721, 45: 3905, 46: 3497, 47: 5030}, 

    'growth_monthly': {0: nan, 1: 111.46, 2: -59.09, 3: 137.19, 4: -26.14, 5: -35.43, 6: 55.71, 7: 26.38, 8: 6.71, 9: -4.16, 10: -2.55, 11: 2.67, 12: -13.06, 13: -16.49, 14: 28.79, 15: -9.43, 16: 35.85, 17: -51.08, 18: 65.23, 19: -11.64, 20: -14.48, 21: -51.57, 22: 64.59, 23: -38.75, 24: nan, 25: 113.57, 26: -36.36, 27: 65.67, 28: -81.80, 29: 190.89, 30: -5.7, 31: -10.66, 32: 38.43, 33: 11.81, 34: 39.46, 35: 3.66, 36: -24.54, 37: 7.53, 38: 2.09, 39: 34.72, 40: -22.37, 41: -44.76, 42: 23.9, 43: 42.59, 44: 32.71, 45: -59.83, 46: -10.45, 47: 43.84}, 

    '6_month_rolling_average': {0: nan, 1: nan, 2: nan, 3: nan, 4: nan, 5: nan, 6: 30.62, 7: 16.44, 8: 27.4, 9: 3.84, 10: 7.78, 11: 14.13, 12: 2.66, 13: -4.48, 14: -0.8, 15: -1.68, 16: 4.72, 17: -4.24, 18: 8.81, 19: 9.62, 20: 2.41, 21: -4.62, 22: 0.17, 23: 2.23, 24: nan, 25: nan, 26: nan, 27: nan, 28: nan, 29: nan, 30: 41.05, 31: 20.34, 32: 32.81, 33: 23.83, 34: 44.04, 35: 12.83, 36: 9.69, 37: 12.72, 38: 6.67, 39: 10.49, 40: 0.18, 41: -7.89, 42: 0.18, 43: 6.03, 44: 11.13, 45: -4.63, 46: -2.64, 47: 12.13}}

这是到目前为止我的代码，我设法根据类型进行过滤，但我没有设法同时包含growth_monthly和6_month_rolling_average。我希望预先选择每月的增长并显示所有类型。然而，用户应该能够在查看每月增长和滚动平均值之间切换。理想情况下，我什至想稍后添加 12 个月的滚动平均值和更多数据：

# Figure
fig = px.line(df, x = 'date', y = ['growth_monthly']) #, 6_month_rolling_average
fig.update_yaxes(title = 'Growth (in %)')
fig.update_xaxes(title = None)
fig.update_layout(title = 'Growth', margin = {'t': 100, 'r': 10, 'l': 50, 'b': 50},
                  legend=dict(xanchor='left', x= 1.01, yanchor = 'top', y = 1.0, title = None, bgcolor='rgba(0,0,0,0)', orientation = 'v', 
                              font = dict(size = 10, color = "black")))

button_all = dict(label = 'All',
                      method = 'update',
                      args = [{'visible': df.columns.isin(df.columns),
                               'title': 'All',
                               'showlegend':True}])

fig.update_layout(
    annotations=[
        dict(text="Sortimentsbereich:", x=-0.24, xref="paper", y=1.06, yref="paper",
                             align="left", showarrow=False),
    ],
    updatemenus=[
        go.layout.Updatemenu(
            active = 0,
            showactive = True,
            buttons = [button_all] + [
                {
                    "label": t.name,
                    "method": "restyle",
                    "args": [{"visible": [t2.name == t.name for t2 in fig.data], 
                              'showlegend':True}],
                }
                for t in fig.data
            ]
            
        )
    ],
)

fig.show()

Answer 1

我可能不明白你所有的目标，但我知道你想把月增长率和移动平均线一起显示，不是用express，而是用图形对象，以散点图的线模式，绘制图表月增长率和移动平均线。如果我的回答有遗漏请评论。

df.head()
date    type    total_transactions  growth_monthly  6_month_rolling_average
0   2018-01-01  A   3848    NaN     NaN
1   2018-02-01  A   8137    111.46  NaN
2   2018-03-01  A   3329    -59.09  NaN
3   2018-04-01  A   7896    137.19  NaN
4   2018-05-01  A   5832    -26.14  NaN

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=df['date'],
    y=df['growth_monthly'],
    name='growth_monthly',
    line_color='blue'
))

fig.add_trace(go.Scatter(
    x=df['date'],
    y=df['6_month_rolling_average'],
    name='6_month_rolling_average',
    line_color='red'
))

fig.update_yaxes(title = 'Growth (in %)')
fig.update_xaxes(title = None)
fig.update_layout(title = 'Growth',
                  margin = {'t': 100, 'r': 10, 'l': 50, 'b': 50},
                  legend=dict(
                      xanchor='left',
                      x= 1.01, 
                      yanchor = 'top',
                      y = 1.0,
                      title = None,
                      bgcolor='rgba(0,0,0,0)',
                      orientation = 'v',
                      font = dict(size = 10, color = "black")
                  ))

button_all = dict(label = 'All',
                      method = 'update',
                      args = [{'visible': df.columns.isin(df.columns),
                               'title': 'All',
                               'showlegend':True}])

fig.update_layout(
    annotations=[
        dict(text="Sortimentsbereich:", x=-0.24, xref="paper", y=1.10, yref="paper",
                             align="left", showarrow=False),
    ],
    updatemenus=[
        go.layout.Updatemenu(
            active = 0,
            showactive = True,
            buttons = [button_all] + [
                {
                    "label": t.name,
                    "method": "restyle",
                    "args": [{"visible": [t2.name == t.name for t2 in fig.data], 
                              'showlegend':True}],
                }
                for t in fig.data
            ]
            
        )
    ],
)

fig.show()

Answer 2

您可能不需要使用下拉菜单，而只需使用图例项和图例组（每种类型一个项目，每个增长度量一组）。我把两者都放了，这样你就能明白我的意思并选择更方便的。

这个想法是利用

px.line()

，添加

color='type'

，这样您就可以为每种类型获得一条轨迹，每种类型都有特定的颜色，并对您想要显示的每个增长变量执行此操作。使用

legendgroup

将这些轨迹（类型）分配到各自的组（增长变量）中。

types = df['type'].unique()

tracegroups = [
    dict(name='growth_monthly', label='Monthly growth'),
    dict(name='6_month_rolling_average', label='6 months rolling average'),
    # ...12_month_rolling_average
]

# Create one trace per type, for each tracegroup, and assign data to main fig.
fig = go.Figure()
for g in tracegroups:
    _fig = px.line(df, x='date', y=g['name'], color='type')
    _fig.update_traces(legendgroup=g['name'], legendgrouptitle_text=g['label'])
    fig.add_traces(_fig.data)

fig.update_yaxes(title='Growth (in %)')
fig.update_xaxes(title=None)
fig.update_layout(title='Growth', margin={'t': 100, 'r': 10, 'l': 50, 'b': 50},
                  legend=dict(
                      groupclick='toggleitem', # <- allows to show/hide single items within groups
                      xanchor='left',
                      x=1.01,
                      yanchor='top',
                      y=1.0,
                      title=None,
                      bgcolor='rgba(0,0,0,0)',
                      orientation='v',
                      font=dict(size=10, color="black")))

button_all = dict(label='All',
                  method='update',
                  args=[{
                      'visible': [True] * len(types) * len(tracegroups),
                      'title': 'All'}])

fig.update_layout(
    annotations=[
        dict(text="Sortimentsbereich:", x=-0.24, xref="paper", y=1.06, yref="paper",
             align="left", showarrow=False),
    ],
    updatemenus=[
        go.layout.Updatemenu(
            active=0,
            showactive=True,
            buttons=[button_all] + [
                {
                    "label": g['label'],
                    "method": "restyle",
                    "args": [{
                        "visible": [g2['name'] == g['name'] for g2 in tracegroups for t in types],
                    }]
                }
                for g in tracegroups
            ]
        )
    ]
)

fig.show()