Dash Dropdown更改多个图形

Question

我正在使用dash和plotly构建一个仪表板，但我的回调遇到了问题。我已经查看了文档，但似乎无法正常工作。我的布局是正确的，只是无法更新图形。其想法是，当选择作业编号时，所有图形都将相应地发生变化。

当我在一个单独的jupyter笔记本上运行代码时，图形工作得很好，只是在应用程序中没有。我对蟒蛇和短跑是新手，所以如果错误是愚蠢的，我道歉。

仪表板的预期结构如下：
---第1行---标题
----第2行---2列，每个列中都有下拉选择器(rowid_selector&solution_selector(
---第3行---2栏，其中有2个图(柱状图(
---第4行---2一栏，其中有两个图(线和饼图(
>---第5行---客户意向数据帧

''' Imports & Dependencies'''

from dash import dash, dcc, html, dash_table
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
import sqlite3
''' Import of data '''
df = pd.read_csv('data2.csv')
cdata = pd.read_csv('cdata.csv')

# ----------------
app = dash.Dash(external_stylesheets=[dbc.themes.MINTY])
server = app.server
rowid_options = []
for rowid in df['rowID'].unique():
rowid_options.append({'label':rowid,'value':rowid})
solution_options = []
for solution in df['solution'].unique():
solution_options.append({'label':solution,'value':solution})

app.layout = dbc.Container([
dbc.Row([html.H1("Analytics Dashboard")]),
dbc.Row([
html.Label("Select the campaign RowID or Solution that you would like to query from the dropdowns below."),
dbc.Col([dcc.Dropdown(id = "rowid_selector", options = rowid_options,
clearable=True, placeholder="Select your RowID")
]),
dbc.Col([dcc.Dropdown(id = "solution_selector", options = solution_options,
clearable=True, placeholder="Select your Product/Solution")
])]),
dbc.Row([
dbc.Col([dcc.Graph(
id='graph1', figure={}
)
]),
dbc.Col([dcc.Graph(
id='graph2', figure={}
)
]),
]),
dbc.Row([
dbc.Col([dcc.Graph(
id='graph3', figure={}
)
]),
dbc.Col([dcc.Graph(
id='graph4', figure={}
)
])
]),
dbc.Row([html.H2("Customer Intent Tracker")]),
dbc.Row([
html.Div([
dash_table.DataTable(
id='datatable-interactivity',
columns=[{"name": i, "id": i, "deletable": False, "selectable": True} for i in cdata.columns],
data=cdata.to_dict('leads'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=False,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
page_size= 10,
),
html.Div(id='datatable-interactivity-container')
])
])
])

@app.callback(
Output("graph1", "figure"), 
Input("rowid_selector", "value"))
def update_value(selected_rowid):
campaign_summary = df.loc[df.rowID.isin([selected_rowid]),["rowID", "status"]]
campaign_summary["Counts"] = campaign_summary.groupby(["status"]).transform(len)
campaign_summary.set_index("rowID", inplace=True)
campaign_summary.drop_duplicates()
graph1 = px.histogram(campaign_summary, x=campaign_summary.index, nbins=20, color='status')
graph1.update_layout(bargap=0.2)
return graph1
if __name__ == "__main__":
app.run_server(debug=False, port=8050)

Answer 1

创建没有子项的列，并添加dcc。使用回调将对象图形化为其子对象。像这样：

''' Imports & Dependencies'''
from dash import dash, dcc, html, dash_table
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
import sqlite3
''' Import of data '''
df = pd.read_csv('data2.csv')
cdata = pd.read_csv('cdata.csv')

# ----------------
app = dash.Dash(external_stylesheets=[dbc.themes.MINTY])
server = app.server
rowid_options = []
for rowid in df['rowID'].unique():
rowid_options.append({'label':rowid,'value':rowid})
solution_options = []
for solution in df['solution'].unique():
solution_options.append({'label':solution,'value':solution})

app.layout = dbc.Container([
dbc.Row([html.H1("Analytics Dashboard")]),
dbc.Row([
html.Label("Select the campaign RowID or Solution that you would like to query from the dropdowns below."),
dbc.Col([dcc.Dropdown(id = "rowid_selector", options = rowid_options,
clearable=True, placeholder="Select your RowID")
]),
dbc.Col([dcc.Dropdown(id = "solution_selector", options = solution_options,
clearable=True, placeholder="Select your Product/Solution")
])]),
dbc.Row([
dbc.Col(id = 'col_graph1', children={}),
dbc.Col(id = 'col_graph2', children={}),
]),
dbc.Row([
dbc.Col(id='col_graph3', children={}),
dbc.Col(id='col_graph4', children={}),
]),
dbc.Row([html.H2("Customer Intent Tracker")]),
dbc.Row([
html.Div([
dash_table.DataTable(
id='datatable-interactivity',
columns=[{"name": i, "id": i, "deletable": False, "selectable": True} for i in cdata.columns],
data=cdata.to_dict('leads'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=False,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
page_size= 10,
),
html.Div(id='datatable-interactivity-container')
])
])
])

@app.callback(
Output("col_graph1", "children"),
Input("rowid_selector", "value"))
def update_value(selected_rowid):
campaign_summary = df.loc[df.rowID.isin([selected_rowid]),["rowID", "status"]]
campaign_summary["Counts"] = campaign_summary.groupby(["status"]).transform(len)
campaign_summary.set_index("rowID", inplace=True)
campaign_summary.drop_duplicates()
fig1 = px.histogram(campaign_summary, x=campaign_summary.index, nbins=20, color='status')
fig1.update_layout(bargap=0.2)
graph1 = dcc.Graph(id="graph1", figure=fig1)
return graph1
if __name__ == "__main__":
app.run_server(debug=False, port=8050)

然而，如果没有这些数据，我可以100%确定这段代码是否有效。