plotly-dash：在 dbc 卡内嵌入指标图答案

【问题标题】：plotly-dash: embed indicator graph inside of a dbc cardplotly-dash：在 dbc 卡内嵌入指标图
【发布时间】：2021-02-03 12:43:47
【问题描述】：

我一整天都在碰壁，找不到在 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'}),

这是最终输出的样子：

我不确定我还能尝试将图表带入框内，如有任何帮助，将不胜感激

【问题讨论】：

这有什么更新吗？你有没有看过我的回答。您还遇到问题吗？
嘿，我不记得看到你的答案，但找到了一个可行的解决方案。如果我没有给予应得的荣誉，我所有的道歉！

标签： python css plotly-dash

【解决方案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（dash 使用的）喜欢的。

【讨论】：