使用 Plotly/Dash 在单个网页中开发两个图表

Question

我在开发连接到单个下拉菜单的两个图表时遇到问题。

我认为代码部分起作用是因为输出确实产生了两个空白图而不是正确的饼图。我认为问题可能在于将回调连接到 graphh，但我不确定。

提前感谢您的帮助！

app = dash.Dash(__name__)

all = df.Pillar.unique()

app.layout=html.Div(className='row', children=[
    html.H1("PRO Project Management dashboard"),
    dcc.Dropdown(id='pillar-choice',
                 options=[{'label':x, 'value':x} for x in all],
                 value=all,
                 multi=True),
    html.Div(children=[
    dcc.Graph(id='graph1', style={'display':'inline-block', 'width': '50%'}),
    dcc.Graph(id='graph2', style={'display':'inline-block', 'width': '50%'})
    ])
])

@app.callback(
    Output(component_id='graph1', component_property='figure'),
    Input(component_id='pillar-choice', component_property='value')
)
def update_graph1(value_pillar):
        print(value_pillar)
        dff = df[df.Pillar.isin(value_pillar)]
        fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
        return fig_1
    
@app.callback(
    Output(component_id='graph2', component_property='figure'),
    Input(component_id='pillar-choice', component_property='value')
)
def update_graph_2(value_pillar):
        print(value_pillar)
        dff = df[df.Pillar.isin(value_pillar)]
        fig = px.pie(data_frame=dff, names='Cadence', values='Project No', title='Number of Projects by Cadence')
        return fig_2
    
if __name__=='__main__':
    app.run_server()

Answer 1

具有模拟示例数据以使代码可重现
您的回调都返回了未初始化的变量。修复了这个问题，两个饼图链接为按预期方式下拉

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import numpy as np

# Build App
app = JupyterDash(__name__)

df = pd.DataFrame({"Pillar":np.random.choice(["Enterprise","Department","Local"],20),"Project No":range(20),
                  "Cadence":np.random.choice(list("ABCD"),20)})

all = df.Pillar.unique()

app.layout=html.Div(className='row', children=[
    html.H1("PRO Project Management dashboard"),
    dcc.Dropdown(id='pillar-choice',
                 options=[{'label':x, 'value':x} for x in all],
                 value=all,
                 multi=True),
    html.Div(children=[
    dcc.Graph(id='graph1', style={'display':'inline-block', 'width': '50%'}),
    dcc.Graph(id='graph2', style={'display':'inline-block', 'width': '50%'})
    ])
])

@app.callback(
    Output(component_id='graph1', component_property='figure'),
    Input(component_id='pillar-choice', component_property='value')
)
def update_graph1(value_pillar):
        print(value_pillar)
        dff = df[df.Pillar.isin(value_pillar)]
        fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
        return fig
    
@app.callback(
    Output(component_id='graph2', component_property='figure'),
    Input(component_id='pillar-choice', component_property='value')
)
def update_graph_2(value_pillar):
        print(value_pillar)
        dff = df[df.Pillar.isin(value_pillar)]
        fig = px.pie(data_frame=dff, names='Cadence', values='Project No', title='Number of Projects by Cadence')
        return fig
    
# Run app and display result inline in the notebook
app.run_server(mode="inline")

使用 Plotly/Dash 在单个网页中开发两个图表

Developing two graphs in a single webpage with Plotly/Dash

plotly

plotly-dash