在 Python Dash Bootstrap 组件中设置 dash-daq 图形高度答案

【问题标题】：Setting dash-daq graph height in Python Dash Bootstrap Components在 Python Dash Bootstrap 组件中设置 dash-daq 图形高度
【发布时间】：2021-03-16 15:08:40
【问题描述】：

我是使用 Python Plotly 和 Dash 进行仪表板开发的新手。我也没有 CSS 或 html 的背景。我正在尝试构建一个仪表板以在仪表板中显示来自数据库的实时和过去数据。数据由连接到 raspi 的传感器提供。我使用 Dash 和引导组件来实现如下所示的结构。我想在列中使用引导卡作为每个图表的容器。因为我不喜欢 go.Indicator Gauge Charts 我尝试使用 dash daq one，它在范围、颜色、缺少标签等方面有自己的问题。

我遇到的最大问题是我无法使用百分比高度在 dbc.Card 中拟合仪表图。

我的代码如下：

dbc.Row([dbc.Card([dbc.CardHeader(["Gauge"]), 
                 dbc.CardBody(
                        daq.Gauge(
                            color={"gradient":True ,"ranges":{"#ff0001": [0, 15], "ffff01":[15, 21], "green": [21, 22], "yellow" : [22,26], "#FF0000": [26,30] }},
                            showCurrentValue = True,
                            value=22,
                            scale={'interval': 2, 'labelInterval': 2},
                            max=30,
                            min=0,
                            style = {
                                     "height" : "80%"
                                     }
                            ) 
                
                )], style = {"height" : "50%"})
        ], className="border", style = {"height" : "50vh"})], style={"height": "100vh"})

来自主 div 的最后一个样式字典。无论我试图改变什么，它总是以某种方式给我以下输出。

dash daq Gauge

如何调整与它所在的 dbc 卡相关的高度？

Targeted Design

在此先感谢

【问题讨论】：

标签： python css plotly-dash plotly-python dash-bootstrap-components

【解决方案1】：

根据documentation，这可以通过使用“size”参数轻松解决，我认为该参数以像素为单位。使用此方法，无论其大小如何，它都可以放入任何卡片中。

daq.Gauge(
    size=200,
    value=2,
    label='Default',

)

【讨论】：