python - Plotly Dash 在仪表板中给我一个“加载布局错误”消息。如何解决？

Question

我正在尝试在此存储库中运行仪表板。托管时代码没有错误。

Dash is running on http://127.0.0.1:9090/

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

但是当我访问http://127.0.0.1:9090/时，我看到“加载布局错误”。我无法调试确切的错误是什么。

我在我的系统环境中托管了几个情节仪表板，没有任何问题。所以，我想这不是与模块版本/包/依赖项相关的问题。

布局代码：

app.layout = html.Div(
    children=[
        # # Error Message
        html.Div(id="error-message"),
        # Top Banner
        html.Div(
            className="study-browser-banner row",
            children=[
                html.H2(className="h2-title", children="CUSTOMER LOYALTY PROGRAM"),

                html.Div(
                    className="div-logo",
                    children=html.Img(
                        className="logo", src=app.get_asset_url("dash-logo-new.png")
                    ),
                ),

            ],
        ),

        html.Div(
            [
                html.Div(
                    [
                        html.Div(

                            children=[
                                # html.H6("Upload File"),
                                dcc.Upload(
                                    id="upload-data",
                                    className="upload",
                                    children=html.Div(
                                        children=[
                                            html.P("Drag and Drop CSV or "),
                                            html.A("Select Files"),
                                        ]
                                    ),
                                    accept=".csv",
                                ),
                            ],
                        ),
                        html.Br(),
                        html.Div(
                            className="padding-top-bot",
                            children=[
                                html.H6("Select Country"),
                                dcc.Dropdown(
                                    id="country-dropdown",
                                    options=[
                                        {"label": i, "value": i} for i in tmp_df[0]['Country'].unique()
                                    ],
                                    value='Select...'
                                ),
                            ],
                        ),
                        html.Br(),
                        html.Div(
                            className="padding-top-bot",
                            children=[
                                html.H6("Customer Segment"),
                                dcc.RadioItems(
                                    id="category-type",
                                    options=[
                                        {
                                            "label": "Champions",
                                            "value": "Champions"
                                        },
                                        {
                                            "label": "Require Activation",
                                            "value": "Require Activation"
                                        },
                                        {
                                            "label": "Cant Loose Them",
                                            "value": "Cant Loose Them"
                                        },
                                        {
                                            "label": "Potential",
                                            "value": "Potential"
                                        },
                                        {
                                            "label": "Promising",
                                            "value": "Promising"
                                        },
                                        {
                                            "label": "Loyal",
                                            "value": "Loyal",
                                        },
                                        {
                                            "label": "Needs Attention",
                                            "value": "Needs Attention",
                                        },
                                    ],
                                    # value="Champions",
                                    labelStyle={
                                        "display": "inline-block",
                                        "padding": "12px 12px 12px 0px",
                                    },
                                ),
                            ],
                        ),
                        # html.P("Interactivity"),
                        html.Br(),
                        daq.BooleanSwitch(
                            id='daq-toggle-interactivity',
                            on=False,
                            color="#2E86C1"
                        ),

                    ],
                    className="pretty_container two columns",
                    id="cross-filter-options",
                ),
            ],
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            className="twelve columns card-left",
                            children=[
                                html.Div(
                                    # className="bg-white",
                                    children=[
                                        html.H6("CUSTOMER SEGMENTATION"),
                                        dcc.Graph(id="heatmap"),
                                    ],
                                )
                            ],
                        ),

                    ],
                    className="pretty_container four columns",
                    # id="cross-filter-options1",
                ),
            ],
        ),

        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            className="twelve columns card-left",
                            children=[
                                html.Div(
                                    # className="bg-white",
                                    children=[
                                        html.H6("RECENCY & FREQUENCY DISTRIBUTION"),
                                        dcc.Graph(id="dist"),
                                    ],
                                )
                            ],
                        ),

                    ],
                    className="pretty_container six columns",
                    # id="cross-filter-options1",
                ),
            ],
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            className="twelve columns card-left",
                            children=[
                                html.Div(
                                    # className="bg-white",
                                    children=[
                                        html.H4("RECENCY VS MONETARY"),
                                        dcc.Graph(id="fig_mr"),
                                    ],
                                )
                            ],
                        ),

                    ],
                    className="pretty_container four columns",
                    # id="cross-filter-options1",
                ),
            ],
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            className="twelve columns card-left",
                            children=[
                                html.Div(
                                    # className="bg-white",
                                    children=[
                                        html.H4("FREQUENCY VS MONETARY"),
                                        dcc.Graph(id="fig_mf"),
                                    ],
                                )
                            ],
                        ),

                    ],
                    className="pretty_container four columns",
                    # id="cross-filter-options1",
                ),
            ],
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            className="twelve columns card-left",
                            children=[
                                html.Div(
                                    # className="bg-white",
                                    children=[
                                        html.H4("FREQUENCY VS RECENCY"),
                                        dcc.Graph(id="fig_rf"),
                                    ],
                                )
                            ],
                        ),

                    ],
                    className="pretty_container four columns",
                    # id="cross-filter-options1",
                ),
            ],
        ),

        html.Div(
            # className="row app-body",
            children=[
                html.Div(
                    className="five columns card-left",
                    children=[
                        html.Div(
                            # className="thead-dark",
                            children=[
                                html.H6("CUSTOMER SEGMENTATION"),
                                tbl_RFMVal,
                            ],
                        ),
                    ],
                ),
                html.Div(
                    className="four columns card-left",
                    children=[
                        html.Div(
                            # className="bg-white",
                            children=[
                                html.H6("RFM SCORES"),
                                tbl_RFMAggregate,
                            ],
                        )
                    ],
                ),

                dcc.Store(id="error", storage_type="memory"),
            ],
        ),
    ]
)

标签： pythonhtmlplotlydashboardplotly-dash