将图形大小调整到其内部的指示器

Question

我正在使用 plotly 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

plotly 指标本身实际上也占用了所有可用的 space 如果你愿意的话。你可以看到如果不使用破折号显示绘图就是这种情况：

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()

您可以通过两种不同的方式来调整图表的大小。您可以在 Figure:

上添加 width 和 height 属性

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()

或者您使用 css 定位 Graph 元素。要在破折号应用程序中包含 css，请参阅文档 here。

将图形大小调整到其内部的指示器

Plotly adjust figure size to indicator inside of it

plotly

plotly-dash

plotly-python