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 破折号代码：

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

删除在破折号组件的 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（破折号使用的）喜欢的。

plotly-dash：在 dbc 卡中嵌入指标图

plotly-dash: embed indicator graph inside of a dbc card

css

python

plotly-dash