有没有办法为绘图设置动态宽度和高度？

Question

我正在尝试使用 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 个图表在不滚动的情况下都可见。

Answer 1

1. 尝试将 dcc.Graph 的 responsive 选项设置为 True。
2. 您可以将图表的高度设置为等于图形的高度。

示例：

height = f'{fig.layout.height}px'
graph = dcc.Graph(
                  figure=fig, 
                  style={'height': height}, 
                  responsive=True,
    )