折线图不在多页绘图式虚线上显示数据

问题描述

这里有个奇怪的错误。单页划线在折线图上显示数据，但当我创建多页划线时，折线图不再显示数据。

仅显示此内容。

即使我的代码相同，似乎也找不到显示折线图数据的方法。

index.js

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

nav_item = dbc.NavItem(dbc.NavLink("Home", href="https://www.google.com"))

# make a reuseable dropdown for the different examples
dropdown = dbc.DropdownMenu(
    children=[
        dbc.DropdownMenuItem("Home", href='http://1577.6.0.1:9999/apps/main'),
        dbc.DropdownMenuItem(divider=True),
        dbc.DropdownMenuItem("Login / Sign-Up", href='http://127.0.0.1:8050/apps/test')

    ],
    nav=True,
    in_navbar=True,
    label="Important Links",
)
navbar = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                # Use row and col to control vertical alignment of logo / brand
                dbc.Row(
                    [
                        dbc.Col(dbc.NavbarBrand("something", className="ml-2",)),
                    ],
                    align="center",
                    no_gutters=True,
                ),
                href="https://plot.ly",
            ),
            dbc.NavbarToggler(id="navbar-toggler2"),
            dbc.Collapse(
                dbc.Nav(
                    [
                     nav_item,
                     dropdown,
                     ], className="ml-auto", navbar=True
                ),
                id="navbar-collapse2",
                navbar=True,
            ),
        ]
    ),
    color="#ED4651",
    dark=True,
    className="mb-5",
)

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


@app.callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/apps/login':
        return login.layout
    elif pathname == '/apps/main':
        return main.layout
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(debug=True)

main.py

state = pd.read_csv("/U********************.csv", index_col=None)

m1 = 0
m2 = 0
m3 = 0



unique = state["Area"].unique()

sq = ["< 500", "500 to 1000", "1000+", "All Sizes"]
sqVal = []



external_stylesheets = ['https://codepen.io/chrisudoddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options

opts = []
for i in unique:
    opts.append({'label': i, 'value': i})

layout = html.Div(children=[
    html.H1(children='stats'),

    html.Div(children='''
        Simple stuff.
    '''),

    dcc.Dropdown(
        id="my-drop",
        options=opts,
        multi=True,
        value=[unique[0]]
    ),
    #html.Button('Update Graph', id='submit-val', n_clicks=0)

    dcc.Graph(id='example-graph')
])

@app.callback(
    Output('example-graph', 'figure'),
    Input('my-drop', 'value'),
)
def update_output_div(input_value):
    check = []
    figures = []
    unique = input_value
    for i in unique:
        m1 = 0
        m2 = 0
        m3 = 0
        for index, row in state.iterrows():
            if (row["Area"] == i):
                if row["Property Type"] == "Commerical":
                    m1 += row["Price"]
                if row["Property Type"] == "Residential":
                    m2 += row["Price"]
                if row["Property Type"] == "Res-Rental":
                    m3 += row["Price"]

        check.extend([m1, m2, m3])

    frames = []

    data = {'Property Type': state["Property Type"].unique()}

    frames.append(pd.DataFrame(data))

    for a in unique:
        newset = []
        for s in range(3):
            newset.append(check[s])

        complete = {a: newset}
        frames.append(pd.DataFrame(complete))

        check = check[3:]

    result = pd.concat(frames, axis=1)

    fig = go.Figure()
    # fig = px.line(result, x=result['Property Type'], y=result[unique[0]], title="Analysis of Price over Property Type")

    # unique = unique[1:]

    for k in unique:
        fig.add_trace(go.Scatter(x=result['Property Type'], y=result[k], name=k,
                                 line_shape='linear'))
        # fig.add_scatter(x=result['Property Type'], y=result[k], name=k)

    fig.update_layout(title="Price by Property Type",
                      xaxis_title="Property Type",
                      yaxis_title="Price",
                      legend_title="Areas")

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

DASH新手，因此任何帮助都将令人惊叹。谢谢！

---

解决方案

我无法确认，因为您尚未共享导入，但似乎index导入main和main导入index。

您的设置方式会导致app不使用您在main.py中定义的回调函数进行修饰，这会导致图形为空。

有多种方法可以做到这一点，但一种方法是创建一个以app为参数并用回调函数修饰它的函数：

# inside main.py
def init_callbacks(app):
    @app.callback(
        Output("example-graph", "figure"),
        Input("my-drop", "value"),
    )
    def update_output_div(input_value):
        # Do stuff...

然后在index.py中可以执行以下操作：

import main
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

main.init_callbacks(app)

此app由update_output_div回调修饰。

---

请记住，在执行main.init_callbacks(app)时，main模块layout中的元素在app的初始layout中尚不存在。因此，它可能会向您发出有关布局中不存在某些ID的元素的警告。要防止出现这种情况，您可以将具有这些ID的占位符元素作为子项添加到page-content的index.py中，或者设置<[2-17]