Plotly 学习、示例与参数解读系列【3】Layout结构

Plotly 学习、示例与参数解读系列

3 Layout结构

layout是plotly图形结构的主要部件之一，其他的还有data、frames等（详细见系列第一篇
《Plotly 学习、示例与参数解读系列【1】概览》)，layout控制的内容丰富，而且为层次化结构，每一层次的属性都有相关的类对应，方便通过树状结构定位。

3.1 Layout控制的配置

layout控制位置和非数据相关的配置。包括：

• 尺寸和边界
• Figure范围的默认属性：模板、颜色、悬停标签和modebar
• 标题和图例
• 彩色轴（如map图中）
• 子图的各种属性
• 非data的标记如注释(annotations)、形状(shapes)、图片(images)
• 交互式的菜单（或按钮）等
• 滚动条

3.2 主要layout配置项示意图：

3.3 plotly 图形配置代码举例：

#尺寸、背景和全局设置：Paper、plot
fig.update_layout(
	font_size=16,
    paper_bgcolor='#E9E7EF',
    plot_bgcolor='black',
    width=1000,
    margin=dict(t=100,pad=10)
)

#图例
fig.update_layout(
    legend_title='我是图例',
    legend_title_font_color='red',
    legend_bordercolor='black',
    legend_valign='top',
    legend_borderwidth=1
)

#标题
fig.update_layout(
    title='我是标题',
    title_font_size=22,
    title_font_color='red',
    title_x=0.4)

#图形系列非数据相关的设置
fig.layout.bargap=0.5#(如针对bar图)

#x轴：轴、网格线、范围滚动条
fig.update_layout(
    xaxis=dict(
        title='我是X轴',
        title_font_color='red',
        gridcolor='cyan',
        rangeslider=dict(bgcolor='black',yaxis_rangemode='auto')
    ),
    yaxis=dict(
        title='我是y轴',
        title_font_color='red'
    )
    
)

#彩色轴
#动态改变系列为彩色轴
fig.update_traces(
    marker={'color': [4, 6, 5], 'coloraxis': 'coloraxis'},
    selector={'type':'bar','name':'y2'}#选择系列
)
#更新彩色轴
fig.update_coloraxes(
    colorbar_title='我是colorbar',
    colorbar_title_font_color='red',
    colorbar_x=1.02,
    colorbar_y=0,
    showscale=True,
    colorscale=[[0, 'rgb(0,0,255)'], [1, 'rgb(255,0,0)']]#或者用系统的命名配色方案，如’rdylbu'
)


#注释
fig.add_annotation(
    x=0,y=7,
    text='我是注释',
    font=dict(color='red')
)  #动态添加注释
fig.update_annotations(patch=dict(xref='x',yref='y',showarrow=True),
                      arrowcolor='red',
                      arrowhead=4)

属性的定位方式十分灵活，可以用字典指定，也可以用下划线连接，也可以用路径寻找。详情见系列第二篇：Plotly 学习、示例与参数解读系列【2】Figure结构

jupyter notebook中，可以用?来查找帮助，?fig.layout.bargap, ?go.Layout

3.4 layout属性示意图

layout的属性形成层次结构，因此也可以方便的沿层次查找设置项，从而进行plotly高级绘图，进行灵活的图形配置。layout的属性树状图示意如下（根据temlate属性展示），从layout开始，属性树的层次差不多4层。详细的参考见plotly 官网 layout 参考文档