绘图调整图形大小以指示其内部

Question

我正在使用绘图go.Indicator来显示数据集的某些值。这是我的代码：

import dash_core_components as dcc
import plotly.graph_objects as go

value = dff.shape[0]
fig = go.Figure()
fig.add_trace(go.Indicator(
    mode="number",
    value=value,
    domain={'row': 0, 'column': 0},
    title='Total number of incidences'
)
fig.update_layout(
    paper_bgcolor ='lightgray',
    grid={
        'rows': 1,
        'columns': 1,
        'pattern': 'independent'
    }
)

dcc.Graph(
    id='indicator-incidences',
    figure=fig
)

和这里就是图中所表示的。正如您所看到的，它扩展到页面的总宽度，并且高度大于必要的高度。

如何实现图形根据其包含的指示器调整大小？

Answer 1

如果您允许的话，绘图指示器本身实际上也会占用大约所有可用空间。如果您在不使用破折号的情况下显示绘图，您会发现情况就是这样：

fig = go.Figure(
    go.Indicator(
        mode="number+delta",
        value=400,
        number={"prefix": "$"},
        delta={"position": "top", "reference": 320},
        domain={"x": [0, 1], "y": [0, 1]},
    )
)

fig.update_layout(
    paper_bgcolor="lightgray",
)

fig.show()

有两种不同的方法可以调整图表的大小。您可以在 上添加width和属性：heightFigure

fig = go.Figure(
    go.Indicator(
        mode="number+delta",
        value=400,
        number={"prefix": "$"},
        delta={"position": "top", "reference": 320},
        domain={"x": [0, 1], "y": [0, 1]},
    )
)

fig.update_layout(
    paper_bgcolor="lightgray",
    height=500,  # Added parameter
)

fig.show()

或者您Graph使用 来定位该元素css。要在 dash 应用程序中包含 css，请参阅此处的文档。