关于使用 fig.add_trace(go.Indicator(); 的间距的问题；如何添加足够的间距以使每个无花果的标题不重叠？

Posted 2023-02-18

【中文标题】关于使用 fig.add_trace(go.Indicator(); 的间距的问题；如何添加足够的间距以使每个无花果的标题不重叠？

【英文标题】：An issue regarding spacing using fig.add_trace(go.Indicator(); how can I add enough spacing so titles of each fig do not overlap?

【发布时间】：2021-10-26 21:07:50

【问题描述】：

我在下面的可视化中遇到了间距问题。我打算只做一个简单的文本可视化，显示电影和电视节目的数量。我遇到的问题是关于标题。当我将每个无花果分配给一行/列时，它以显示的数字为中心，这使得每个无花果的标题重叠。我尝试添加更多行以将其隔开，但这带来的麻烦多于好处。有没有办法在每个无花果之间添加更多填充？我尝试了一些不同的事情，但我对情节和有时如何结合在一起相对不熟悉。也许还有另一种方法可以进行这种可视化，我把它复杂化了。下面也有一个指向我的输出的链接。

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>",
    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>",
    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>",
    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>",
    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>",
    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>",
    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>",
    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>",
    domain = 'row': 3, 'column': 1))


fig.update_layout(
    grid = 'rows': 4, 'columns': 2)

结果：

【参考方案1】：

你可以使用：

fig.update_layout(height = 800)

这不是非常动态的，但是如果设置它太麻烦的话，用可视化中元素的数量和大小来代替 800 是一种可行的方法手动。

结果：