Plotly-Dash:如何使用 dash bootstrap 组件设计布局? [英] Plotly-Dash: How to design the layout using dash bootstrap components?

问题描述

我对 Dash Plotly 非常陌生，我正在尝试弄清楚如何设计这样的布局.

据我所知，使用 dash bootstrap 组件可以更容易地做到这一点.

import plotly.express as px从 jupyter_dash 导入 JupyterDash将 dash_core_components 导入为 dcc将 dash_html_components 导入为 html将 dash_bootstrap_components 导入为 dbc从 dash.dependencies 导入输入，输出导入 plotly.express 作为 px#虹膜条形图def drawFigure():返回 html.Div([dbc.Card(dbc.CardBody([dcc.Graph(图=px.bar(df，x=sepal_width"，y=sepal_length"，color=species").update_layout(模板='plotly_dark'，plot_bgcolor = 'rgba(0, 0, 0, 0)',paper_bgcolor = 'rgba(0, 0, 0, 0)',),配置={'displayModeBar': 假})])),])# 文本域def drawText():返回 html.Div([dbc.Card(dbc.CardBody([html.div([html.H2(文本"),], style={'textAlign': 'center'})])),])# 数据df = px.data.iris()# 构建应用程序app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])app.layout = html.Div([dbc.Card(dbc.CardBody([dbc.Row([dbc.Col([绘制文本()], 宽度=3),dbc.Col([绘制文本()], 宽度=3),dbc.Col([绘制文本()], 宽度=3),dbc.Col([绘制文本()], 宽度=3),], align='center'),html.Br(),dbc.Row([dbc.Col([画图()], 宽度=3),dbc.Col([画图()], 宽度=3),dbc.Col([画图()], 宽度=6),], align='center'),html.Br(),dbc.Row([dbc.Col([画图()], 宽度=9),dbc.Col([画图()], 宽度=3),], align='center'),]), 颜色 = '深色')])# 运行应用程序并在笔记本中内联显示结果app.run_server(mode='external')

I'm very new to Dash Plotly and I'm trying to figure out how can I design a layout like this.

Layout:

As I understood, this can be done more easy using dash bootstrap components. https://dash-bootstrap-components.opensource.faculty.ai As a first step I should reproduce the layout (grey tiles) and as a second step, I should add some text and some graphs. Just basic.

Thank you.

解决方案

You should check out this link to learn more about Dash Bootstrap Components, and how to structure your layout.

I have made an example using JupyterDash that matches your desired layout.

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px

# Iris bar figure
def drawFigure():
    return  html.Div([
        dbc.Card(
            dbc.CardBody([
                dcc.Graph(
                    figure=px.bar(
                        df, x="sepal_width", y="sepal_length", color="species"
                    ).update_layout(
                        template='plotly_dark',
                        plot_bgcolor= 'rgba(0, 0, 0, 0)',
                        paper_bgcolor= 'rgba(0, 0, 0, 0)',
                    ),
                    config={
                        'displayModeBar': False
                    }
                ) 
            ])
        ),  
    ])

# Text field
def drawText():
    return html.Div([
        dbc.Card(
            dbc.CardBody([
                html.Div([
                    html.H2("Text"),
                ], style={'textAlign': 'center'}) 
            ])
        ),
    ])

# Data
df = px.data.iris()

# Build App
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

app.layout = html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure() 
                ], width=3),
                dbc.Col([
                    drawFigure()
                ], width=3),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=9),
                dbc.Col([
                    drawFigure()
                ], width=3),
            ], align='center'),      
        ]), color = 'dark'
    )
])

# Run app and display result inline in the notebook
app.run_server(mode='external')

这篇关于Plotly-Dash:如何使用 dash bootstrap 组件设计布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！