python-如何对齐在条形图上的文本(包含示例图像)[Plotly-Dash]

在将文本添加到图形中时,我需要帮助.

我试过了text =’y’和text-position =’inside’,但是文本变成垂直或被挤压成小的条形图,因此可以放在条形图中.我只希望它能覆盖所有内容.

这是需要修复的代码的工作示例：

app = dash.Dash(__name__)
app.css.append_css({'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'})

    labels1 = ['0-7','8-12','13-15','16-20','21-25','26+']
values1 = [10,30,10,5,6,8]


labels2 = ['India','Scotland','Germany','NW England','N Ireland','Norway','NE England','Paris','North Africa','scandinavia']
values2 = [1,4,9,11,18,50,7,2]

values3 = [10,111,75,20]
labels4 = ['Safety Manager','Office Administrator','Internal Officer','Assistant Producer']

bar_color = ['#f6fbfc','#eef7fa','#e6f3f7','#deeff5','#d6ebf2','#cde7f0','#c5e3ed','#bddfeb','#b5dbe8','#add8e6']
bar_color2 = ['#e6f3f7','#add8e6']

app.layout = html.Div([
  html.Div([ 
    html.Div([
        dcc.Graph(id = 'age',figure = {
                                    'data': [go.Bar(x = values1,y = labels1,orientation = 'h',marker=dict(color = bar_color2),text = labels1,textposition = 'inside'
                                                    )
                                            ],'layout': go.Layout(title = 'Number of respondees per tenure',yaxis=dict(
                                                                   zeroline=False,showline=False,showgrid = False,autorange="reversed",),xaxis=dict(
                                                                      zeroline=False,showgrid = False
                                                                      )
                                                       )
                                  }
                         )
    ],className = 'four columns'),html.Div([
       dcc.Graph(id = 'location',figure = {
                                          'data': [go.Bar(x = values2,y = labels2,marker=dict(color = bar_color),text = labels2,textposition = 'inside'
                                                         )
                                                  ],'layout': go.Layout(title = 'Number of respondees per region',yaxis=dict(
                                                                          zeroline=False,xaxis=dict(
                                                                          zeroline=False,showgrid = False
                                                                         )                                                             ) 
                                        }
                                )
        ],html.Div([
            dcc.Graph(id = 'job',figure = {
                                            'data': [go.Bar(x = values3,y = labels4,text = labels4,textposition = 'inside'                                                            
                                                           )
                                                    ],'layout': go.Layout(title = 'Number of respondees per role',yaxis=dict(
#                                                                         automargin=True,zeroline=False,showgrid = False
                                                                         )
                                                              ) 
                                           }
                                )
        ],className = 'four columns')


  ],className = 'row')

])

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

这是输出：

这是我希望文本显示的示例：

我在两件事上需要帮助：

>使文本与条形的左侧而不是右侧对齐.
>如果钢筋长度短,我希望文本仍然可见(即使钢筋长度为零)并且不压缩或垂直对齐.

如果您还可以在第三张图表中说明如何修复被截断的y轴,那就太好了.现在,我必须更改标签以使其适应,这很耗时.有没有一种方法可以向容器中添加填充物或其他东西？

谢谢.

最佳答案

这是一个不错的解决方法,但是在仔细检查可打印的python文档之后,我找不到任何可以完全满足您使用所提供的plotly属性的要求的东西.如果您现在需要一次性快速修复,请尝试使用yaxis = dict(showticklabels = False)并手动将标签添加为注释,例如：

layout = go.Layout(
    # Hide the y tick labels
        yaxis=dict(
        showticklabels=False),annotations=[
        dict(
        # I had to try different x values to get alignment
            x=0.8,y='giraffes',xref='x',yref='y',text='Giraffes',font=dict(
                family='Arial',size=24,color='rgba(255,255,255)'
            ),align='left',# Don't show any arrow
            showarrow=False,

我得到的输出如下所示：

您可以查看Plotly Annotations和Chart Attributes文档,看是否有更适合您需要的东西.

编辑：我开始发布此答复之前将代码添加到问题.这是一个示例,说明如何在相关代码中为第一个图形的前两个y标签进行批注：

app.layout = html.Div([
  html.Div([ 
    html.Div([
        dcc.Graph(id = 'age',showticklabels=False
                                                                   autorange="reversed",showgrid = False
                                                                      )
                                                                   ),annotations=[dict(
                                                                        x=0.8,y=labels1[0],text=labels1[0],font=dict(
                                                                            family='Arial',255)'
                                                                        ),showarrow=False,dict(
                                                                        x=1.2,y=labels1[1],text=labels1[1],

编辑2：@ user8322222,要回答评论中的问题,您可以使用列表推导使注释字典如下：

 annotations1 = [dict(x=(len(labels1[i])*0.15),y=labels1[i],text=labels1[i],font=dict(family='Arial',255)'),showarrow=False) for i in range(len(labels1))]

但是,我认为不会有一个常数可以乘以字符中的文本长度(例如我在示例中用于x的情况)以获得完美对齐.您可以像this post中那样使用字符串的像素长度或其他度量来设计一种更精确的确定x的方法,以使其正确对齐.希望能有所帮助.