Plotly Gauge组件如何设置数值文本显示完整精确值而非千位缩写

规则说明 #

go.Indicator 组件的主数值文本格式化规则，和仪表盘gauge轴的刻度格式化规则完全独立。传入value=1001.50却显示为“1k”，是因为组件对未显式指定格式化规则的主数值，默认启用了SI单位自动缩写逻辑，只要单独调整主数值的配置参数，完全可以在不改动仪表盘刻度展示效果的前提下，实现自定义的精确数值展示。

配置方法 #

• 为每个需要自定义格式的Indicator trace，在参数中添加独立的number配置块，该配置块的所有参数仅作用于主数值文本渲染，不会关联影响gauge刻度的展示规则
• 在number配置块中显式传入valueformat参数，覆盖默认的自动缩写逻辑，格式语法遵循d3-format标准：
  • 要实现$1,001.50这类带货币符号、千分位分隔、保留两位小数的效果，对应的格式规则为：配置prefix为$，valueformat为,.2f
  • 格式串各段含义：
    • , 启用千分位数字分隔符
    • .2f 指定保留两位小数的定点数值展示
• 该配置完全隔离于gauge轴的参数设置，哪怕gauge轴仍保持默认的1k/10k类缩写展示，主数值区域也会严格按照自定义规则渲染

改造后的可运行代码 #

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Indicator(
    domain = {'row': 1, 'column': 0},
    value = 1001.50,
    mode = "gauge+number",
    title = {'text': "Total Donations"},
    # 主数值格式化配置，独立于gauge轴
    number = {
        'prefix': '$',
        'valueformat': ',.2f'
    },
    delta = {'reference': 46000},
    gauge = {'axis': {'range': [None, 46000]},
             'threshold' : {
                 'line': {'color': "red", 'width': 4},
                 'thickness': 0.75,
                 'value': 40000
             }}))

fig.add_trace(go.Indicator(
    mode = "number+delta",
    value = 540,
    number = {'prefix': "$", 'valueformat': ',.2f'},
    delta = {'position': "top", 'reference': 450},

    domain = {'row': 1, 'column': 1}))

fig.update_layout(
    grid = {'rows': 1, 'columns': 2, 'pattern': "independent"},
    template = {'data' : {'indicator': [{
        'title': {'text': "Donations this Month"},
        'mode' : "number+delta+gauge",
        'delta' : {'reference': 90}}]}
                         })

fig.show()

实际效果 #

配置完成后，第一个仪表盘的主数值区域会准确显示$1,001.50，不会出现自动缩写的“1k”，同时原有仪表盘刻度的展示规则完全不受改动。

内容的提问来源于stack exchange，提问作者Rob Slippey