Python Dash：如果有多个网址，则无法显示图形

Question

我有一个包含表格和图形的页面。但是，当我使用多个网址时，只会显示表格，而出现空白图片。

这里有两个链接，在两个链接中都显示了表格。但是，这个数字并没有到来。

这是重现我的问题的示例代码-

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import numpy as np


def generate_table(dataframe, max_rows=10):
    # TEST MODE
    dataframe = pd.read_csv(
        'https://gist.githubusercontent.com/chriddyp/'
        'c78bf172206ce24f77d6363a2d754b59/raw/'
        'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
        'usa-agricultural-exports-2011.csv')
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )


def draw_histogram(data):
    # TEST MODE
    trace1 = go.Histogram(
        x=np.random.randn(500),
        xbins=dict(
            start=0,
            end=100,
            size=10
        ),
        marker=dict(
            color='#c6dbef'
        ),
        opacity=0.9
    )
    data = [trace1]

    layout = go.Layout(
        xaxis=dict(
            title='data'
        ),
        yaxis=dict(
            title='count'
        ),
        bargap=0,
        bargroupgap=0.1,
        paper_bgcolor='rgba(240,240,240,10)',
        plot_bgcolor='rgba(240,240,240,10)'
    )

    figure = go.Figure(data=data, layout=layout)
    return figure


def onload_data():
    '''Actions to perform upon initial page load'''

    options = (
        [{'label': data['label'], 'value': data['value']}
         for data in [{'label': '1', 'value': '1'}, {'label': '2', 'value': '2'}]]
    )
    return options


app = dash.Dash()
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

index_page = html.Div([
    dcc.Link('Go to First Data', href='/first-data'),
    html.Br(),
    dcc.Link('Go to Second Data', href='/second-data'),
])

first_data_layout = html.Div([

    html.Div([
        html.H4('Fist Data')
    ]),
    # Dropdown Grid
    html.Div([
        html.Div([
            # Select Editorial Title Dropdown
            html.Div([
                html.Div('Select Data', className='three columns'),
                html.Div(dcc.Dropdown(id='data-selector',
                                      options=onload_data()),
                         className='nine columns')
            ]),

        ], className='six columns'),

    ], className='twelve columns'),
    # Results
    html.Div([
        html.P('Table 1', style={'text-align': 'center'},className='five columns'),
    ], className='twelve columns'),

    html.Div([
        html.Div(
            html.Table(id='table-1'),
            className='five columns'
        ),
    ], className='twelve columns'),

    html.Div([
        html.Div([
            html.Br()
        ])
    ], className='twelve columns'),

    html.Div([
        html.P('First figure', style={'text-align': 'center'},className='five columns'),
    ], className='twelve columns'),

    html.Div([
        html.Div([
            dcc.Graph(id='figure-1'),

        ], className='five columns'),
    ], className='twelve columns'),

])


@app.callback(
    Output(component_id='table-1', component_property='children'),
    [
        Input(component_id='data-selector', component_property='value'),
    ]
)
def load_table_1(data):
    return generate_table(data, max_rows=5)


@app.callback(
    Output(component_id='figure-1', component_property='figure'),
    [
        Input(component_id='data-selector', component_property='value'),
    ]
)
def load_fig_1(data):
    return draw_histogram(data)


second_data_layout = html.Div([

    # Page Header
    html.Div([
        html.H4('Data Analytics')
    ]),

    # Dropdown Grid
    html.Div([
        html.Div([
            # Select Editorial Title Dropdown
            html.Div([
                html.Div('Select Data', className='three columns'),
                html.Div(dcc.Dropdown(id='data-selector',
                                      options=onload_data()),
                         className='nine columns')
            ]),

        ], className='six columns'),

    ], className='twelve columns'),

    html.Div([
        html.Div(
            html.Table(id='p2-table-1'),
            className='ten columns'
        ),

    ], className='twelve columns'),

], style={'marginLeft': '3%'})

@app.callback(
    Output(component_id='p2-table-1', component_property='children'),
    [
        Input(component_id='data-selector', component_property='value'),
    ]
)
def load_p2_table_1(data):
    return generate_table(data, max_rows=5)


# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/first-data':
        return first_data_layout
    elif pathname == '/second-data':
        return second_data_layout
    else:
        return index_page


# Extra Dash styling.
app.css.append_css({
    "external_url": 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


if __name__ == '__main__':
    app.run_server(
        debug=False,
        host='0.0.0.0',
        port=8050
    )

我需要将图形重写为子级吗？