我的数据库布局没有并排显示
我正在尝试创建一个仪表板来并排显示项目符号图表,但它们垂直地显示在彼此的下方。我将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;。
相关文章