Блог

У меня есть панель мониторинга с 4 страницами, и мне удалось создать различный контент для каждой страницы очень простым способом, используя для примера dbc.navbar.

Но то, что я пытаюсь сейчас сделать, — это иметь разный макет диаграммы для каждой страницы. Я знаю, что он построен на столбцах и строках, но не могу разобраться в этом.

Вот мой код для панели мониторинга

 import dash from dash import dcc from dash import html import dash_bootstrap_components as dbc from dash.dependencies import Input, Output #for the callbacks   app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])  # the style arguments for the sidebar. We use position:fixed and a fixed width SIDEBAR_STYLE = {  "position": "fixed",  "top": 0,  "left": 0,  "bottom": 0,  "width": "16rem",  "padding": "2rem 1rem",  "background-color": "black", }  # the styles for the main content position it to the right of the sidebar and # add some padding. CONTENT_STYLE = {  "margin-left": "18rem",  "margin-right": "2rem",  "padding": "2rem 1rem", }  sidebar = html.Div(  [  html.H2("Sidebar", className="display-4"),  html.Hr(),  html.P(  "A simple sidebar layout with navigation links", className="lead"  ),  dbc.Nav(  [  dbc.NavLink("Home", href="/", active="exact"),  dbc.NavLink("Page 1", href="/page-1", active="exact"),  dbc.NavLink("Page 2", href="/page-2", active="exact"),  dbc.NavLink("Page 3", href="/page-3", active="exact"),  ],  vertical=True,  pills=True,  ),  ],  style=SIDEBAR_STYLE, )  content = html.Div(id="page-content", style=CONTENT_STYLE) header = html.H4(  "Side Example.py", className="bg-primary text-white p-2 mb-2 text-center" )  app.layout = html.Div([dcc.Location(id="url"),sidebar,header,content])   @app.callback(Output("page-content", "children"),[Input("url", "pathname")])  #Output("line-chart", "figure"),    def render_page_content(pathname):  if pathname == "/":  return dbc.NavbarSimple(children=[html.H2('Particular info for HOMEPAGE')],color="grey",dark=True,)  elif pathname == "/page-1":  return dbc.NavbarSimple(children=[html.H2('Particular info for PAGE1')],color="grey",dark=True,)  elif pathname == "/page-2":  return dbc.NavbarSimple(children=[html.H2('Particular info for PAGE2')],color="grey",dark=True,)  # If the user tries to reach a different page, return a 404 message  return dbc.Jumbotron(  [  html.H1("404: Not found", className="text-danger"),  html.Hr(),  html.P(f"The pathname {pathname} was not recognised..."),  ]  )   if __name__ == "__main__":  app.run_server(port=8001)  

Пример базового рисунка того, чего я пытаюсь достичь, приведен на изображениях ниже