如何隐藏Plotly Indicator图表中的指标数值？

核心思路 #

别用CSS隐藏，直接通过Plotly自带配置关闭数值显示，彻底避免空白区域。关键是调整Indicator的mode参数，或者单独设置数值的可见性。

具体实现 #

1. Python环境代码示例

创建Indicator时，把mode设为"gauge"（默认是"gauge+number"），只渲染仪表盘，不显示数值：

import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    mode = "gauge",  # 仅保留仪表盘模式，移除数值显示
    value = 450,
    domain = {'x': [0, 1], 'y': [0, 1]},
    title = {'text': "Speed"},
    gauge = {
        'axis': {'range': [None, 500]},
        'bar': {'color': "darkblue"},
        'steps': [
            {'range': [0, 250], 'color': "lightgray"},
            {'range': [250, 400], 'color': "gray"}
        ],
        'threshold': {
            'line': {'color': "red", 'width': 4},
            'thickness': 0.75,
            'value': 490
        }
    }
))

fig.show()

如果需要保留gauge+delta这类混合模式，但单独隐藏数值，直接设置number的可见性为False：

import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    mode = "gauge+delta",
    value = 450,
    domain = {'x': [0, 1], 'y': [0, 1]},
    title = {'text': "Speed"},
    number={'visible': False},  # 单独隐藏数值
    delta = {'reference': 380},
    gauge = {
        'axis': {'range': [None, 500]},
        'bar': {'color': "darkblue"},
        'steps': [
            {'range': [0, 250], 'color': "lightgray"},
            {'range': [250, 400], 'color': "gray"}
        ],
        'threshold': {
            'line': {'color': "red", 'width': 4},
            'thickness': 0.75,
            'value': 490
        }
    }
))

fig.show()

2. JavaScript环境代码示例

同样修改mode为"gauge"：

var data = [
  {
    type: "indicator",
    mode: "gauge",  // 仅渲染仪表盘
    value: 450,
    domain: { x: [0, 1], y: [0, 1] },
    title: { text: "Speed" },
    gauge: {
      axis: { range: [null, 500] },
      bar: { color: "darkblue" },
      steps: [
        { range: [0, 250], color: "lightgray" },
        { range: [250, 400], color: "gray" }
      ],
      threshold: {
        line: { color: "red", width: 4 },
        thickness: 0.75,
        value: 490
      }
    }
  }
];

var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
Plotly.newPlot('myDiv', data, layout);

若要保留混合模式但单独隐藏数值：

var data = [
  {
    type: "indicator",
    mode: "gauge+delta",
    value: 450,
    domain: { x: [0, 1], y: [0, 1] },
    title: { text: "Speed" },
    number: { visible: false },  // 隐藏数值
    delta: { reference: 380 },
    gauge: {
      axis: { range: [null, 500] },
      bar: { color: "darkblue" },
      steps: [
        { range: [0, 250], color: "lightgray" },
        { range: [250, 400], color: "gray" }
      ],
      threshold: {
        line: { color: "red", width: 4 },
        thickness: 0.75,
        value: 490
      }
    }
  }
];

var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
Plotly.newPlot('myDiv', data, layout);

为什么CSS方案没用？ #

用CSS隐藏数值时，只是把数值元素设为不可见，但元素占据的布局空间还在，所以会留空白。而通过Plotly自身配置关闭数值显示，该元素根本不会被渲染，自然没有空白问题。

内容的提问来源于stack exchange，提问作者Charles Michel