小能豆

折线图未显示多页绘图破折号上的数据

py

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

1.png

只是显示了这一点。

尽管我的代码相同,但似乎找不到显示折线图数据的方法。

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)

主程序

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,所以任何帮助都非常感谢。谢谢!


阅读 16

收藏
2024-12-10

共1个答案

小能豆

我无法确认,因为您尚未分享您的导入,但似乎是index导入mainmain导入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模块中的元素在的初始阶段layout尚不存在。因此,它可能会向您发出警告,指出布局中不存在具有某些 ID 的元素。为了防止这种情况,您可以将具有这些 ID 的占位符元素作为子元素添加到内部,或者您可以设置为。app``layout``main.init_callbacks(app)``page-content``index.py``suppress_callback_exceptions``True

2024-12-10