plotly-dash:在DBC卡中嵌入指示器图形

Question

我一整天都在把头撞到墙上，找不到一种方法把一个仪表盘指示器装进dash_bootstrap_components卡里。

看起来卡片的主体和图形并不在卡片内部。我对dash不是很熟悉，所以很难找到解决问题的方法。

以下是我到目前为止在绘制指示器方面所能做的事情：

fig3 = go.Figure()
fig3.add_trace(go.Indicator(
    mode = "number+delta",
    number = {"font":{"size":40},'prefix': "$"},
    value = 2045672,
    delta = {'reference': 30000},
    gauge = {'shape': "bullet"},
    title = {"text": "On Hand<br><span style='font-size:0.9em;color:gray'></span>"},
    #title='Stock On Hand',
    domain = {'x': [0, 1], 'y': [0, 1]},
    ))
fig3.update_layout(paper_bgcolor = "rgba(0,0,0,0)",
                   plot_bgcolor = "rgba(0,0,0,0)",
                   autosize=False,
                   width = 200,
                   height=200,
                  )
fig3.update_traces(align="center", selector=dict(type='indicator'))

我被迫为指示器指定宽度和高度，否则它就太大了，但是这会导致问题，因为它的大小不会针对卡进行调整。

下面是框和图的html dash代码：

html.Div(children=[

             html.Div(children=[
                html.Div(children=[ 
                    html.Div(children=[
                      dbc.Card(
                        [dbc.CardBody(
                            [dcc.Graph(figure=fig3)
                             ]
                        )],className="card", style={"width": "15rem", "height":"8rem"}
   
                    ),
                ], className='jumbotron', style={'background-color': '#fffffff'}),
                    
                ])
            ],className="col-3 mx-auto"),

           ],className="row p-0 h-100", style={'background-color': '#f7f7f7', 'height':110}),
    ], className="full-width p-0 h-100", style={'background-color': '#fffffff'}),

下面是最终输出的样子：

​

​

我不知道我还能做些什么，如果能帮上忙，我将不胜感激

Answer 1

删除在dash组件的style中设置了height的实例，并且指示器不会被切断。

所以你可以这样做：

app.layout = html.Div(
    children=[
        html.Div(
            children=[
                html.Div(
                    children=[
                        html.Div(
                            children=[
                                dbc.Card(
                                    [
                                        dbc.CardBody(
                                            [dcc.Graph(figure=fig3)],
                                            style={"width": "15rem"},
                                        )
                                    ]
                                )
                            ],
                            className="jumbotron",
                            style={"backgroundColor": "#fffffff"},
                        )
                    ],
                    className="col-3 mx-auto",
                )
            ],
            className="row p-0 h-100",
            style={"backgroundColor": "#f7f7f7"},
        )
    ],
    className="full-width p-0 h-100",
    style={"backgroundColor": "#fffffff"},
)

我还将样式属性的大小写更改为camelCase，因为这是React ( dash使用的)所喜欢的。