我正在尝试使用 Dash 和 Plotly 图表创建仪表板。我还为卡片组件添加了破折号引导组件。
我想以这种方式在 4 张卡片上放置 4 个图表:
我能够使用以下代码创建卡体:
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
layout = html.Div(
[
dbc.Row(
[
dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure1))]))], width=8),
dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure2))]))], width=4),
]
),
dbc.Row(
[
dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure1))]))], width=6),
dbc.Col([dbc.Card(dbc.CardBody([html.P(dcc.Graph(figure=figure2))]))], width=6),
]
),
]
)
但是,基于数据的绘图有时会扩展到卡片之外。
如何使图形宽度动态(扩展和提取),使它们保留在卡片内。
而且,如何保持高度动态,以便所有 4 个图表在不滚动的情况下都可见。
示例:
height = f'{fig.layout.height}px'
graph = dcc.Graph(
figure=fig,
style={'height': height},
responsive=True,
)