Plotly多行标题与图片顶部像素级对齐问题咨询

当Plotly标题包含换行符（如<br>）时，常规设置yanchor='top'和y=1无法实现标题与图片顶部的像素级对齐，此时多行标题会向下偏移，无法贴合图片顶部边缘：

原因是多行标题的整体高度会改变Plotly对标题位置的计算逻辑，默认的y=1是基于标题整体的顶部位置，而非第一行文字的顶部。

方法一：手动微调标题的y坐标 #

针对多行标题，可通过增大y值抵消换行带来的高度偏移，具体数值可根据标题行数和字体大小调整：

import plotly.graph_objects as go
import plotly.offline as pyo

layout = go.Layout(
    height=500, width=500,
    margin=dict(l=5, r=5, b=5, t=20),
    title=dict(
        text=f"<b>Test Title<br>Subtitle</b>", font_size=15, 
        x=0.5, y=1.03,  # 微调y值抵消多行高度
        yanchor='top', xanchor='center'),
)
data = [go.Scatter(x=[1, 2, 3, 4], y=[6, 5, 4, 3], mode='lines')]
chart = go.Figure(data=data, layout=layout)
pyo.plot(chart)

方法二：使用Annotations替代原生标题（更精准） #

Annotations支持更精确的位置控制，完全不受换行影响，可直接将标题定位到图片顶部：

import plotly.graph_objects as go
import plotly.offline as pyo

layout = go.Layout(
    height=500, width=500,
    margin=dict(l=5, r=5, b=5, t=20),
    title=None,  # 隐藏原生标题
    annotations=[
        dict(
            text="<b>Test Title<br>Subtitle</b>",
            x=0.5, y=1,
            xanchor='center', yanchor='top',
            font=dict(size=15),
            showarrow=False,
            xref='paper', yref='paper'
        )
    ]
)
data = [go.Scatter(x=[1, 2, 3, 4], y=[6, 5, 4, 3], mode='lines')]
chart = go.Figure(data=data, layout=layout)
pyo.plot(chart)

这种方法通过xref='paper'和yref='paper'基于画布坐标定位，y=1对应画布顶部，结合yanchor='top'可让多行标题的最顶端与图片顶部完全对齐。

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