使用破折号的 Web 应用程序答案

【问题标题】：Web application using dash使用破折号的 Web 应用程序
【发布时间】：2021-03-09 08:05:38
【问题描述】：

如何扩展容器的宽度以在一行中容纳更多数量的地块？我只能使用引导破折号组件创建最多 12 列。有什么解决办法吗？

【问题讨论】：

能否请您提供到目前为止您尝试了什么？
import plotly.express as px import pandas as pd import dash import dash_core_components as dcc import dash_bootstrap_components as dbc import dash_html_components as html df = pd.read_csv('git.io/fjpo3', usecols=['name' , 'group', 'year', 'value']) df.head(3) fig = px.bar(df, x ="name", y ="value", color ='group', animation_frame ='year ', hover_name ='name') fig["layout"].pop("updatemenus") # 可选，放置动画按钮 fig.show()
row1 = html.Div( [ dbc.Row( [ dbc.Col(dbc.Row([dbc.Col(dcc.Graph(figure=fig))),dbc.Col(dcc.Graph (figure=fig)),dbc.Col(dcc.Graph(figure=fig)),dbc.Col(dcc.Graph(figure=fig))])) html.Br(), ]), ]) def run_server (self, port=8087, debug=True, threaded=True, **flask_run_options): self.server.run(port=port, debug=debug, **flask_run_options)
app = dash.Dash(name, external_stylesheets=[dbc.themes.GRID]) app.title="Some Dashboard" app.layout = html.Div([ html.Div([ "Dashboard using Dash"], style={ 'fontFamily': 'sans-serif', 'textAlign': 'center', 'fontSize':'2rem', 'color':'white', ' backgroundColor':'#696969', },), html.Div(row1), html.Br(), ], style={ 'color':'black', 'backgroundColor':'#2F4F4F', 'overflowY' : 'scroll' }, ) if name == 'main': app.run_server(port=8087)
这是我的代码。如果您有任何想法来实现在破折号的单行中绘制没有视觉效果，请告诉我

【解决方案1】：

您可以将多个图放在一个 div 中。我假设现在你有一个 div，其中有 12 个图，每个图代表 bootstrap 视图中的一个单元格。

dbc.Row([
    dbc.Col(plot0, width=1)
    ... 
])

您可以将它们进一步嵌套分组以实现此目的。

dbc.Row([
    dbc.Col(dbc.Row([dbc.Col(plot0), dbc.Col(plot1)])),
    dbc.Col(dbc.Row([dbc.Col(plot2), dbc.Col(plot3)]))
    ...
])

【讨论】：

我们可以，但这样做不会获得清晰的视觉效果/绘图，因为当您嵌套列时，绘图大小会进一步减小，它不会有用。如果我们可以扩展容器大小，我们可以容纳没有列。但是使用 dbc，它只能绘制 12 列。
你的容器在屏幕尺寸上不是最大的吗？我不确定您要达到的目标。一方面，您说您想要超过 12 个地块/行，但如果可以的话，地块的大小存在问题。