向Plotly条形图添加控制过滤器

Question

我正在尝试将过滤器选择添加到绘图栏。以下是工作代码：

import plotly.express as px
import plotly.graph_objects as go
# from plotly.subplots import make_subplots
import plotly as py
import pandas as pd
from plotly import tools

d = {'Mkt_cd': ['Mkt1','Mkt2','Mkt3','Mkt4','Mkt5','Mkt1','Mkt2','Mkt3','Mkt4','Mkt5'],
       'Category': ['Apple','Orange','Grape','Mango','Orange','Mango','Apple','Grape','Apple','Orange'],
           'CategoryKey': ['Mkt1Apple','Mkt2Orange','Mkt3Grape','Mkt4Mango','Mkt5Orange','Mkt1Mango','Mkt2Apple','Mkt3Grape','Mkt4Apple','Mkt5Orange'],
            'Current': [15,9,20,10,20,8,10,21,18,14],
           'Goal': [50,35,21,44,20,24,14,29,28,19],
            'Q1': [30,25,11,34,10,14,4,19,8,9]
     }
dataset  = pd.DataFrame(d)

grouped = dataset.groupby('Category', as_index=False).sum()
data = grouped.to_dict(orient='list')
v_cat = grouped['Category'].tolist()
v_current = grouped['Current']
v_goal = grouped['Goal']
v_q1 = grouped['Q1']
fig = go.Figure()
fig.add_trace(go.Bar(
    x=v_current,
    y=v_cat,
    marker_color="#ff0000",
    orientation='h',
    width=0.25
    ))
for i, g in enumerate(v_goal):
    a=fig.add_shape(type="rect",
                    x0=g+0.5, y0=v_cat[i], x1=g, y1=v_cat[i],
                    line=dict(color='#636EFA', width = 58))

for i, g in enumerate(v_q1):
    b=fig.add_shape(type="rect",
                    x0=g+0.5, y0=v_cat[i], x1=g, y1=v_cat[i],
                    line=dict(color='#636EFA', width = 58))    

#Adding Buttons here, first for Mkt_cd
buttons = []
groups = dataset['Mkt_cd'].unique().tolist()
frame={}
for i in groups:
    frame[str(i)]=dataset[dataset['Mkt_cd']==i]

for k in frame.keys():
    buttons.append(dict(method='restyle',label=k,
                        args=[{'y':[frame[str(k)]['Mkt_cd'].values],
                               'type':'bar'}, [0]],
                        )
                  )
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)

updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True

fig.update_layout(barmode='relative', updatemenus=updatemenu)
fig.show()

我的数据集在密钥级别处于未聚合状态。我在类别级别将其分组为Grouped。我想添加两个过滤器：

1）Mkt_Cd过滤器。用户应该能够选择他们的市场，看看他们的类别在他们的市场上做得如何。理想情况下，这应该是一个多选过滤器，您可以在其中添加一组市场，并查看数据的外观，它还应该过滤目标和第一季度数据

第二）目标过滤器。用户应该能够选择他们想要查看的目标跟踪（现在是目标或第一季度，但将来也是第二季度、第三季度）。同样，理想的情况是多选民

大概是这样的：

我可以添加一个笨重的Mkt_cd过滤器，但正如你所看到的，它坏了：p，并且无法重置视图。我甚至没有尝试尝试目标过滤器！任何帮助都将不胜感激

Answer 1

我在使用JupyterLab之前的贡献的基础上提出了一个建议。你可能会发现它有点乱。但是如果这是你在概念上寻找的，那么我们可以把它清理干净。我们还重写了整个过程，使用“纯”破折号，而不是JupyterDash。下面的代码段将生成下图，其中包含：

1. 一个单选项，用于选择一个市场，以及
2. 一份清单，可以让你选择我认为是你目标的任何类别：['Goal', 'Q1]

以下是几种不同选择组合的场景：

图1

图2

图3

JupyterDash

的完整代码

import plotly.express as px
import plotly.graph_objects as go
import plotly as py
import pandas as pd
from plotly import tools

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

d = {'Mkt_cd': ['Mkt1','Mkt2','Mkt3','Mkt4','Mkt5','Mkt1','Mkt2','Mkt3','Mkt4','Mkt5'],
       'Category': ['Apple','Orange','Grape','Mango','Orange','Mango','Apple','Grape','Apple','Orange'],
           'CategoryKey': ['Mkt1Apple','Mkt2Orange','Mkt3Grape','Mkt4Mango','Mkt5Orange','Mkt1Mango','Mkt2Apple','Mkt3Grape','Mkt4Apple','Mkt5Orange'],
            'Current': [15,9,20,10,20,8,10,21,18,14],
           'Goal': [50,35,21,44,20,24,14,29,28,19],
            'Q1': [30,25,11,34,10,14,4,19,8,9]
     }
dataset  = pd.DataFrame(d)

# Dash
app = JupyterDash(__name__)
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div([
    
    dcc.RadioItems(
        id='market-radio',
        options=[{'label': k, 'value': k} for k in dataset['Mkt_cd'].unique()],
        value=dataset['Mkt_cd'].iloc[0]
    ),

    html.Hr(),
    html.Hr(),

        dcc.Checklist(
        id='goals-radio',
        options=[{'label': k, 'value': k} for k in ['Goal', 'Q1']],
        value=['Goal'],
    ),
    
    html.Hr(),
    
    html.Div(id='display-selected-values'),
    
    dcc.Graph(id="mkt_graph")
    
])

# Make a figure based on the selections
@app.callback( # Columns 2m_temp_prod, or....
    Output('mkt_graph', 'figure'),
    [Input('market-radio', 'value'),
     Input('goals-radio', 'value')])
def make_graph(market, levels):
    dataset  = pd.DataFrame(d)
    dataset = dataset[dataset['Mkt_cd']==market]
    grouped = dataset.groupby('Category', as_index=False).sum()
    data = grouped.to_dict(orient='list')
    v_cat = grouped['Category'].tolist()
    level_colors = px.colors.qualitative.Plotly[2:]

    fig = go.Figure()
    fig.add_trace(go.Bar(
        x= grouped['Current'],
        y=grouped['Category'].tolist(),
        marker_color="#ff0000",
        orientation='h',
        width=0.25
        ))

    for j, lev in enumerate(levels):
        for i, g in enumerate(grouped[lev]):
            fig.add_shape(type="rect",
                            x0=g+0.5, y0=v_cat[i], x1=g, y1=v_cat[i],
                            line=dict(color=level_colors[j], width = 58))
    return fig

app.run_server(mode='inline', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

附录：精心组织的控件和图形

这很容易被作为一个问题单独提出，但为了完整起见，下面的完整片段将生成以下Dash应用程序，其控件整齐地排列在图的左侧。到目前为止，我知道的唯一可靠方法是通过引导组件。这在这方面引入了一些新概念。但这是我现在必须提供的。但仍有改进的余地。如som空气控制头和选项之间。但如果这是你可以使用的东西，我们可以解决这个问题

boostrap组件的完整代码段

import plotly as py
import pandas as pd

from plotly import tools
import plotly.express as px
import plotly.graph_objects as go

import dash
import dash_core_components as dcc
import dash_html_components as html
from jupyter_dash import JupyterDash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output


d = {'Mkt_cd': ['Mkt1','Mkt2','Mkt3','Mkt4','Mkt5','Mkt1','Mkt2','Mkt3','Mkt4','Mkt5'],
       'Category': ['Apple','Orange','Grape','Mango','Orange','Mango','Apple','Grape','Apple','Orange'],
           'CategoryKey': ['Mkt1Apple','Mkt2Orange','Mkt3Grape','Mkt4Mango','Mkt5Orange','Mkt1Mango','Mkt2Apple','Mkt3Grape','Mkt4Apple','Mkt5Orange'],
            'Current': [15,9,20,10,20,8,10,21,18,14],
           'Goal': [50,35,21,44,20,24,14,29,28,19],
            'Q1': [30,25,11,34,10,14,4,19,8,9]
     }
dataset  = pd.DataFrame(d)

app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])
template = 'plotly_dark'

controls = dbc.Card(
        [dbc.FormGroup(
            [
                dbc.Label("Market"),
     dcc.RadioItems(
        id='market-radio',
        options=[{'label': 'All', 'value': 'All'}] + [{'label': k, 'value': k} for k in dataset['Mkt_cd'].unique()],
        value='All',
        
    ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Goals"),
        dcc.Checklist(
        id='goals-radio',
        options=[{'label': k, 'value': k} for k in ['Goal', 'Q1']],
        value=['Goal'],
        style={'display': 'inline-block'}
    ),
            ], 
        ),
    ],
    body=True,
    style = {'font-size': 'large'}
)

app.layout = dbc.Container(
    [
        html.H1("Markets and goals"),
        html.Hr(),
        dbc.Row([
            dbc.Col([controls],xs = 4),
            dbc.Col([
                dbc.Row([
                    dbc.Col(dcc.Graph(id="market_graph")),
                ])
            ]),
        ]),
        html.Br(),
    ],
    fluid=True,
)

@app.callback(
    Output("market_graph", "figure"),
    [
        Input("market-radio", "value"),
        Input("goals-radio", "value"),
    ],
)
def history_graph(market, levels):

    dataset  = pd.DataFrame(d)
    
    if not market == 'All':
        dataset = dataset[dataset['Mkt_cd']==market]
    
    grouped = dataset.groupby('Category', as_index=False).sum()
    data = grouped.to_dict(orient='list')
    v_cat = grouped['Category'].tolist()
    level_colors = px.colors.qualitative.Plotly[2:]

    fig = go.Figure()
    fig.add_trace(go.Bar(
        x= grouped['Current'],
        y=grouped['Category'].tolist(),
        marker_color="#ff0000",
        orientation='h',
        width=0.25
        ))

    for j, lev in enumerate(levels):
        for i, g in enumerate(grouped[lev]):
            fig.add_shape(type="rect",
                            x0=g+0.5, y0=v_cat[i], x1=g, y1=v_cat[i],
                            line=dict(color=level_colors[j], width = 58))

    fig.update_layout(template='plotly_dark')

    
    return fig


app.run_server(mode='inline', port = 8007)