如何解决错误 Dash 无法在浏览器中加载数据（错误加载布局）

Question

有不少帖子讨论过这个问题，但没有解决我的问题。问题是运行多页 dash 应用程序时浏览器中的 'error loading layout'。在终端我没有错误。

我的应用基于“迈向数据科学”一文：https://towardsdatascience.com/callbacks-layouts-bootstrap-how-to-create-dashboards-in-plotly-dash-1d233ff63e30

我已经重新安装了不同的模块并重新开始，结果都没有令人满意的结果。

我的代码是：

app.py

import dash

app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server

index.py

from dash import dcc
from dash import html
from dash import Output, Input

from app import app
from layouts import navbar
from layouts import layout_overview, layout_comparison, layout_analysis

app.config.suppress_callback_exceptions = True

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


@app.callback(Output('page-content', 'children'),
            [Input('url', 'pathname')])
def display_page(pathname):
    
    if pathname == '/':
        return layout_overview
    elif pathname == '/overview':
        return layout_overview
    elif pathname == '/comparison':
        return layout_comparison
    elif pathname == '/analysis':
        return layout_analysis
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(port='5000', host='127.0.0.1', debug=True)

layouts.py（建设中）

from dash import dcc
from dash import html
import pandas as pd


########################################
# Add Data
########################################

df = pd.read_csv('C:\Users\StefanSijbesmaDAAT\Documents\Scripting\Test\assets\Life expectancy.csv')
years = df['Year'].unique()
country=df['Entity'].unique()

########################################
# Create Auxiliary Components Here
########################################

def navbar():
    html.Nav([  # navbar on top of the dashboard using html components
        dcc.Link(
            html.H4('Overview'),
            href='/overview',
            style={
                'display': 'inline-block',
                'margin-right': '30px'
                    }
        ),
        dcc.Link(
            html.H4('Comparison'),
            href='/comparison',
            style={
                'display': 'inline-block',
                'margin-right': '30px'
                    }
        ),
        dcc.Link(
            html.H4('Analysis'),
            href='/analysis',
            style={
                'display': 'inline-block',
                'margin-right': '230px'
                    }
        ),
            ], className='navbar'),
    
    return navbar


########################################
# Create Page Layouts Here
########################################

### Layout Overview
layout_overview = html.Div('overview'

)

### Layout Comparison
layout_comparison = html.Div('comparison'

)

### Layout Analysis
layout_analysis = html.Div('analysis'

)

callbacks.py

还是空的

谁能给我指出正确的方向？

提前致谢。

Answer 1

问题出在 navbar() 函数中。它应该 return 一个元素，目前您正在 return 一个函数（因为您忘记将 html.Nav 元素分配给变量并 return 它）。

固定码：

def navbar():
    navbar_element = html.Nav(
        [  # navbar on top of the dashboard using html components
            dcc.Link(
                html.H4("Overview"),
                href="/overview",
                style={"display": "inline-block", "margin-right": "30px"},
            ),
            dcc.Link(
                html.H4("Comparison"),
                href="/comparison",
                style={"display": "inline-block", "margin-right": "30px"},
            ),
            dcc.Link(
                html.H4("Analysis"),
                href="/analysis",
                style={"display": "inline-block", "margin-right": "230px"},
            ),
        ],
        className="navbar",
    )

    return navbar_element

还要小心，html.Nav() 定义后有逗号，这会导致函数 navbar 变成 return tuple 而不是一个元素。

此修复后，您在访问 http://127.0.0.1:5000 时将看不到布局，因为您的 display_page 回调需要访问 http://127.0.0.1:5000/。所以这也是你可以改进的部分。

如何解决错误 Dash 无法在浏览器中加载数据（错误加载布局）

how can I resolve the error Dash can not load data in browser (error loading layout)

python

loading

plotly-dash