我的数据库布局没有并排显示

我正在尝试创建一个仪表板来并排显示项目符号图表,但它们垂直地显示在彼此的下方。我将dash.bootstrap组件与ploy一起使用。很多人在不同的论坛上说,我应该在样式中添加dbc.hemes.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
    )
])

解决方案

一切都很好,除了我在行外有第二个dbc.Col,并且必须将它放在dbc.Row中。我只是重写了它,并从一个基本的字符串开始,然后找出了为什么会发生这种情况。只需在括号上方添加一个,并在每个数据库中添加->;Align=";Start&Quot;,Align=";Center";Align=";End&Quot;。

相关文章