python - 我的 dbc.Row dash bootstrap 布局没有并排显示

问题描述

我正在尝试创建一个仪表板来并排显示项目符号图表，但它们在彼此下方垂直显示。我正在使用 dash.bootstrap-components 和 plotly。很多人在不同的论坛上说我应该将 dbc.themes.bootstrap 添加到样式中以使其工作，但它对我不起作用 -> (app = dash.Dash( name , external_stylesheets=[dbc.themes .BOOTSTRAP]）。

下面是我的一些代码，这些代码显示了垂直方向的图表。我希望它们并排显示。当我第一次安装我的包时，我能够让它工作，但是一旦我升级了 pip 并运行了一些其他的包并将我的文件夹移动到另一个位置，布局似乎就坏了。有什么建议么。我确实认为 conda 和 pip 安装与它有关，我假设 bc 我对它们有问题并使用 pip 和 conda 运行不同的包。我还重新安装了 dash_bootstrap_components。任何想法我应该做什么。

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import pandas as pd
import dash_core_components as dcc
import plotly.figure_factory as ff
from dash.dependencies import Input, Output, State

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

  app.layout = html.Div([
    html.Div(html.H6("Title"),
             style={"text-align": "Center"}),
    html.Hr(),
    html.H1("Sub-Title"),
    dbc.CardHeader(
        dbc.Button(
            "Completed",
            color="link",
            id="buttonCompleted",
        )
    ),
    dbc.Collapse(
        dbc.CardBody("Chart goes here if needed."),
        id="collapseCompleted", is_open=False
    ),

    dbc.CardHeader(
        dbc.Button(
            "In Progress",
            color="link",
            id="buttonInProgress",
        )
    ),
    dbc.Collapse(
        dbc.CardBody(html.Div([
            dbc.Row(html.Div([
                dbc.Col(html.Div( [
                    dcc.Graph(id='bullet-chart1', 
                        figure=ff.create_bullet(
                            data, titles="title",
                            ranges='ranges',
                            measures='measures',
                            title=None, autosize=True,
                            width=450, height=300,
                        ),  
                    ), 
                ]), 
                ),

                dbc.Col(html.Div([
                    dcc.Graph(id='bullet-chart2',
                        figure=ff.create_bullet(
                            data2, ranges='ranges',
                            measures='measures',
                            title=None, autosize=True,
                            width=450, height=300
                        )
                    ),
                ]), 
                ),
            ]),
            )
        ])),
        id="collapseInProgress", is_open=True
    ),

    dbc.CardHeader(
        dbc.Button(
            "Not Started",
            color="link",
            id="buttonNotStarted"
        )
    ),

    dbc.Collapse(
        dbc.CardBody("Chart goes here"),
        id="collapseNotStarted", is_open=False
    )
])

标签： pythonhtmlcssplotly-dashdash-bootstrap-components

python - 我的 dbc.Row dash bootstrap 布局没有并排显示

问题描述

解决方案

推荐阅读