使用fig.add_trace(go.Indicator())时标题重叠，如何增加间距解决？

你可以通过两处配置调整解决标题重叠问题：

• 给网格布局设置行间距参数ygap，同时主动设置画布高度，给每行指标留出足够的展示空间
• 给每个Indicator的标题配置内边距，拉开标题与数值的距离，避免上下行内容交叉

修改后的完整代码如下：

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Indicator(
    mode = "number",
    value = 12354,
    number={'font':{'color': '#00A8E1','size':85}},
    title = {"text": "Movies<br><span style='font-size:0.8em;color:gray'>On Prime Video</span>", "pad": 15}, # 新增pad参数设置标题内边距
    domain = {'row': 0,'column': 0}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 2144,
    number={'font':{'color': '#00A8E1','size':85}},
    title = {"text": "TV Shows<br><span style='font-size:0.8em;color:gray'>On Prime Video</span>", "pad": 15},
    domain = {'row': 0,'column': 1}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 3560,
    number={'font':{'color': '#E50914','size':70}},
    title = {"text": "Movies<br><span style='font-size:0.8em;color:gray'>On Netflix</span>", "pad": 15},
    domain = {'row': 1, 'column': 0}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 1931,
    number={'font':{'color': '#E50914','size':70}},
    title = {"text": "TV Shows<br><span style='font-size:0.8em;color:gray'>On Netflix</span>", "pad": 15},
    domain = {'row': 1, 'column': 1}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 903,
    number={'font':{'color': '#66AA33','size':60}},
    title = {"text": "Movies<br><span style='font-size:0.8em;color:gray'>On Hulu</span>", "pad": 15},
    domain = {'row': 2, 'column': 0}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 1754,
    number={'font':{'color': '#66AA33','size':60}},
    title = {"text": "TV Shows<br><span style='font-size:0.8em;color:gray'>On Hulu</span>", "pad": 15},
    domain = {'row': 2, 'column': 1}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 564,
    number={'font':{'color': '#113CCF','size':50}},
    title = {"text": "Movies<br><span style='font-size:0.8em;color:gray'>On Disney+</span>", "pad": 15},
    domain = {'row': 3, 'column': 0}))

fig.add_trace(go.Indicator(
    mode = "number",
    value = 180,
    number={'font':{'color': '#113CCF','size':50}},
    title = {"text": "TV Shows<br><span style='font-size:0.8em;color:gray'>On Disney+</span>", "pad": 15},
    domain = {'row': 3, 'column': 1}))


fig.update_layout(
    height=1000, # 自定义画布总高度，可根据实际展示效果调整数值
    grid = {'rows': 4, 'columns': 2, 'ygap': 0.15} # 新增ygap参数设置网格行间距，取值范围0-1，数值越大间距越宽
)

fig.show()

如果调整后还是存在重叠，可继续调大height或者ygap的数值，也可以适当缩小数值的字体大小适配布局。

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