如何修改dash_daq.Gauge的标签与中间数值的字体大小？

云上老周

2026-8-18

解决dash_daq.Gauge标签与数值字体大小修改问题

dash_daq的Gauge组件没有提供直接设置标签和中间数值字体大小的参数，你直接在style里加'font':'70'是无效的，得通过自定义CSS覆盖组件的默认样式来实现。

具体实现方式：

Gauge的标签对应CSS类名daq-gauge__label，中间显示的数值对应daq-gauge__value-text，通过这两个类名定位元素并设置样式
用html.Style组件将自定义CSS嵌入布局中即可生效

修改后的完整代码：

import dash
import dash_html_components as html
import dash_daq as daq

app = dash.Dash(__name__)

app.layout = html.Div([
    # 嵌入自定义CSS
    html.Style("""
        .daq-gauge__label {
            font-size: 32px; /* 调整标签字体大小 */
            font-weight: 600; /* 可选：设置字体粗细 */
        }
        .daq-gauge__value-text {
            font-size: 48px; /* 调整中间数值字体大小 */
        }
    """),
    html.Div([
        daq.Gauge(
            id='my-gauge-1',
            label="Max",
            value=61,
            showCurrentValue=True,
            color={"gradient":True,"ranges":{"green":[0,30],"yellow":[30,60],"red":[60,80]}},
            max=80,
            size=400,
            style={
                "align": "center",
                "display": "flex",
                "marginTop": "5%",
                "marginBottom": "20%"
            },
        )
    ], style={'width': '40%', 'display': 'inline-block', 'padding': '0 0','height' : '20px'})
])

if __name__ == '__main__':
    app.run_server(debug=True)