折线图不在多页绘图式虚线上显示数据 [英] Line chart not showing data on multi-page plotly dash

问题描述

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

仅显示此内容。

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

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]

这篇关于折线图不在多页绘图式虚线上显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！