Plotly：如何调整轴标签与绘图区域之间的间距？

Question

我该如何在Plotly中调整轴标签和绘图区域之间的间距？特别是我想减小轴标签和绘图区域之间的间距。我附上了一个带有示例的屏幕截图。

以下是可重现的代码片段：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import plotly.express as px
import pandas as pd
import numpy as np

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


df = pd.read_csv("data.txt", sep='\t', parse_dates=["StartTimeRun", "EndTimeRun"])
df = df[df['Status'] != 'NOT_RUN']
df = df[df['Status2'] != 'NOT_RUN']

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_PASS = df.loc[df['Status'] == "PASS"]
df_FAIL = df.loc[df['Status'] == "FAIL"]
trace1 = go.Box(x=df_PASS["Duration(seconds)"], y=df_PASS["Keyword"], name="PASS", orientation='h', marker=dict(color='rgb(158,202,225)', line=dict(color='rgb(8,48,107)', width=1.5)))
trace2 = go.Box(x=df_FAIL["Duration(seconds)"], y=df_FAIL["Keyword"], name="FAIL", orientation='h', marker=dict(color='#fd9668', line=dict(color='rgb(8,48,107)', width=1.5)))
fig = {
    'data': [trace1, trace2],
    'layout':
    go.Layout(
        boxmode='group',  margin=dict(l=200, r=150)
    )
}

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

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

以下是数据框（data.txt）的内容：

SuiteName   Test    Status  Keyword Status2 Duration(seconds)   StartTimeRun    EndTimeRun  Type    FileName
0SmokeTestDD    Validate the use case for Single UE PASS    BuiltIn.Run Keywords    FAIL    12.619  20200809 06:45:18.515   20200809 06:45:31.134   setup   output-20200809-064513.xml
0SmokeTestDD    Validate the use case for Single UE PASS    Validate the work flow  PASS    34.56   20200809 06:45:31.135   20200809 06:49:25.695   kw  output-20200809-064513.xml
0SmokeTestDD    Validate the use case for Single UE PASS    BuiltIn.Run Keywords    PASS    15.344  20200809 06:49:25.695   20200809 06:49:41.039   teardown    output-20200809-064513.xml
Validate the use case for Single UE Validate the work flow  PASS    Login To    FAIL    8.502   20200809 06:45:31.135   20200809 06:45:39.637   kw  output-20200809-064513.xml
Validate the use case for Single UE Validate the work flow  PASS    Select Technology   PASS    1.243   20200809 06:45:39.637   20200809 06:45:55.880   kw  output-20200809-064513.xml
Validate the use case for Single UE Validate the work flow  PASS    Select Menu PASS    7.147   20200809 06:45:55.880   20200809 06:46:03.027   kw  output-20200809-064513.xml
Validate the use case for Single UE Validate the work flow  PASS    BuiltIn.Log FAIL    0.001   20200809 06:46:03.027   20200809 06:46:03.028   kw  output-20200809-064513.xml
Validate the use case for Single UE Validate the work flow  PASS    BuiltIn.Sleep   PASS    5.0 20200809 06:46:03.028   20200809 06:46:08.028   kw  output-20200809-064513.xml

希望这段代码能帮助你找到答案。

- illuminato

Answer 1

我认为最好的方法是采用 fig.update_yaxes(ticksuffix = " ") 技巧：

import plotly.graph_objects as go

labels = ['giraffes', 'orangutans', 'monkeys']

fig = go.Figure(go.Bar(x=[20, 14, 23], y=labels, orientation='h'))

# Adjust for your purposes the width of the blank space in "  "
fig.update_yaxes(ticksuffix = "  ")

fig.show()

- GitHunter0

---

这正是我所需要的，聪明的解决方案！ - Avi Nerenberg

您先生，@GitHunter0，您是一个救命恩人！ - Marko Tankosic

Answer 2

很遗憾，在Plotly中没有好的方法来做到这一点。Plotly非常适合创建交互式图表，但代价是可调性较差。

我能想到的唯一“解决办法”（并且不是很好）是将绘图背景设为与浏览器背景相同的颜色，将网格线颜色更改为与浏览器背景不同的颜色，然后添加填充。（在我的示例中，我假设浏览器背景是白色）。但是，这将填充x轴和y轴，我找不到解决此问题的方法。

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({'ColumnA':[1,2,3,4,5], 'ColumnB':[5,6,7,8,9], 'ColumnC':[6,7,8,9,10]})
trace1 = go.Box(x=df['ColumnA'],orientation='h')
trace2 = go.Box(x=df['ColumnB'],orientation='h')
trace3 = go.Box(x=df['ColumnB'],orientation='h')

fig = go.Figure(data=[trace1, trace2, trace3])
fig.update_layout(
    boxmode='group', 
    boxgap=0.25,
    boxgroupgap=0.25,
    height=500, 
    paper_bgcolor='rgba(0,0,0,0)', 
    plot_bgcolor='rgba(0,0,0,0)',
    xaxis=dict(gridcolor='lightgrey'),
    margin=dict(l=600, r=150, b=10, pad=100)
)
fig.show()

- Derek O

Answer 3

如果可用的刻度标记可以进行调整，并且根据您的数据，您可以在刻度标记中添加空格。可以使用列表推导来添加空格，如下所示：

spaces = ' '* 25
labels = ['giraffes', 'orangutans', 'monkeys']
newLabels = [label+spaces for label in labels]

以下是使用勾号和空格的示例：

import plotly.graph_objects as go
spaces = ' '* 25
labels = ['giraffes', 'orangutans', 'monkeys']

newLabels = [label+spaces for label in labels]

fig = go.Figure(go.Bar(
            x=[20, 14, 23],
            y=newLabels,
            orientation='h'))

fig.show()

- rex

---

是否可以减小轴标签和绘图区域之间的间距？ - illuminato

在 spaces = ' '* 25 中，25是一个数字。您可以自由更改它以适应您的需求 :) - rex

但是我无法将其更改为负数。此外，我尝试将[label+spaces for label in labels]更改为[spaces+label for label in labels]，但它并没有减少轴标签和绘图区域之间的空间。它们之间总是有一个间隙。 - illuminato

Answer 4

实际上您可以这样做：

fig.update_yaxes(
        title_standoff = 50
)

- tomuelle