是否可以构建一个具有过滤数据框的下拉菜单的绘图图？

Question

我有一个如下所示的数据框：

date, sub_id, stat_type, value
jan 1, 1233, link_clicks, 12,
feb 1, 1233, link_clicks, 13,
jan 1, 3424, link_clicks, 23,
feb 1, 3424, link_clicks, 34,
..., 
jan 1, 1233, transaction, 45, 
feb 1, 1233, transaction, 50,
..., 
jan 1, 1233, customer_signups, 9, 
feb 1, 1233, customer_signups, 8
...
etc...

我想构建一个绘图图，其中包含一个下拉菜单，在绘制值之前按stat_type 过滤数据框。

EG 如果您从下拉菜单中选择"link_clicks"，它将绘制以下值：

date, sub_id, stat_type, value
jan 1, 1233, link_clicks, 12,
feb 1, 1233, link_clicks, 13,
jan 1, 3424, link_clicks, 23,
feb 1, 3424, link_clicks, 34,
etc...

使用 plotly 绘制过滤器数据框，但很少有文档说明使用下拉菜单作为单个图表上的过滤器。

我知道 plotly 非常灵活，我想知道是否有人构建了一个交互式图表，其中包含一个用作 DF 过滤器的下拉菜单。

Answer 1

您没有指定如何您想绘制不同的组，但因为您有多个value 的值，用于不同的sub_id在不同的日期，我猜你想要绘制的一个子集如下所示：

sub_id      1233  3424
date                  
2020-01-01    12    24
2020-02-01    14    20
2020-03-01     4     2

如果是这样，那么您的问题的答案是是：

情节一：点击link_clicks时的图

情节2：点击transaction时的图

代码：

# Imports
import plotly.graph_objs as go
import pandas as pd
import numpy as np

dfi=pd.DataFrame({'date': {0: '2020.01.01',
  1: '2020.01.01',
  2: '2020.01.01',
  3: '2020.01.01',
  4: '2020.01.01',
  5: '2020.01.01',
  6: '2020.02.01',
  7: '2020.02.01',
  8: '2020.02.01',
  9: '2020.02.01',
  10: '2020.02.01',
  11: '2020.02.01',
  12: '2020.03.01',
  13: '2020.03.01',
  14: '2020.03.01',
  15: '2020.03.01',
  16: '2020.03.01',
  17: '2020.03.01'},
 'sub_id': {0: 1233,
  1: 1233,
  2: 1233,
  3: 3424,
  4: 3424,
  5: 3424,
  6: 1233,
  7: 1233,
  8: 1233,
  9: 3424,
  10: 3424,
  11: 3424,
  12: 1233,
  13: 1233,
  14: 1233,
  15: 3424,
  16: 3424,
  17: 3424},
 'stat_type': {0: 'link_clicks',
  1: 'transaction',
  2: 'customer_signups',
  3: 'link_clicks',
  4: 'transaction',
  5: 'customer_signups',
  6: 'link_clicks',
  7: 'transaction',
  8: 'customer_signups',
  9: 'link_clicks',
  10: 'transaction',
  11: 'customer_signups',
  12: 'link_clicks',
  13: 'transaction',
  14: 'customer_signups',
  15: 'link_clicks',
  16: 'transaction',
  17: 'customer_signups'},
 'value': {0: 12,
  1: 50,
  2: 9,
  3: 24,
  4: 100,
  5: 18,
  6: 14,
  7: 24,
  8: 39,
  9: 20,
  10: 10,
  11: 8,
  12: 4,
  13: 2,
  14: 3,
  15: 2,
  16: 1,
  17: 1}})

# change some types 
dfi['date']=pd.to_datetime(dfi['date'])
dfi['sub_id']=dfi['sub_id'].astype(str)
df=dfi

# split df by stat_type and organize them in a dict
groups = df['stat_type'].unique().tolist()
dfs={}
for g in groups:
    dfs[str(g)]=df[df['stat_type']==g]

# pivot data to get different sub_id across dates
dfp={}
for df in dfs:
    dfp[df]=dfs[df].pivot(index='date', columns='sub_id', values='value')

# one trace for each column per dataframe
fig=go.Figure()

# set up the first trace
fig.add_trace(go.Scatter(x=dfp['link_clicks'].index,
                             y=dfp['link_clicks']['1233'],
                             visible=True)
             )

fig.add_trace(go.Scatter(x=dfp['link_clicks'].index,
                             y=dfp['link_clicks']['3424'],
                             visible=True)
             )

# plotly start
# buttons for menu 1, names
updatemenu=[]
buttons=[]

# button with one option for each dataframe
for df in dfp.keys():
    buttons.append(dict(method='restyle',
                        label=df,
                        visible=True,
                        args=[{'y':[dfp[str(df)]['1233'].values, dfp[str(df)]['3424'].values],
                               'x':[dfp[str(df)].index],
                               'type':'scatter'}],
                        )
                  )

# some adjustments to the updatemenus
updatemenu=[]
your_menu=dict()
updatemenu.append(your_menu)
updatemenu[0]['buttons']=buttons
updatemenu[0]['direction']='down'
updatemenu[0]['showactive']=True

# add dropdown menus to the figure
fig.update_layout(showlegend=False, updatemenus=updatemenu)

# add notations to the dropdown menus
fig.update_layout(
    annotations=[
        go.layout.Annotation(text="<b>stat_type:</b>",
                             x=-0.3, xref="paper",
                             y=1.1, yref="paper",
                             align="left", showarrow=False),
                          ]
)

fig.show()