Plotly图表如何将x轴文本标签替换为图片或图标

我使用Plotly生成了一张图表，想要替换x轴上的标签，示例图表如下：

该图表x轴当前显示ARI、ATL、BAL等文本标识，请问是否可以将这些x轴标签替换为对应的图片或者图标？

可以实现，Plotly暂不支持直接将x轴tick标签设置为图片，可通过「隐藏原生x轴文本标签 + 对应位置插入图片注释」的方案达成需求，具体操作如下：

前置准备 #

提前整理好所有要替换的图标资源，建议统一调整为30-50px的尺寸，优先使用png/svg透明背景素材。

Python端实现代码示例 #

import plotly.graph_objects as go

# 1. 生成你的基础图表（这里以示例柱状图为例，替换为你自己的图表生成逻辑）
x_labels = ["ARI", "ATL", "BAL"]
y_values = [10, 20, 15]
fig = go.Figure(data=[go.Bar(x=x_labels, y=y_values)])

# 2. 隐藏原生x轴文本标签
fig.update_xaxes(
    showticklabels=False,
    ticks="" # 可选：隐藏x轴刻度线
)

# 3. 批量插入对应位置的图标注释
logo_paths = [
    "本地路径/ari队标.png",
    "本地路径/atl队标.png",
    "本地路径/bal队标.png"
]
# x轴刻度位置和标签一一对应，Plotly默认文本标签的x坐标就是标签顺序的索引（0、1、2...）
for idx, logo_path in enumerate(logo_paths):
    fig.add_layout_image(
        dict(
            source=logo_path,
            x=idx,
            y=-0.15, # 调整该参数控制图标和x轴的距离，负值代表在x轴下方
            xref="x",
            yref="paper", # 基于画布相对位置定位，缩放时不会错位
            sizex=0.4, # 图标宽度
            sizey=0.4, # 图标高度
            xanchor="center",
            yanchor="top"
        )
    )

# 4. 调整图表底部边距，避免图标被截断
fig.update_layout(margin=dict(b=60))

fig.show()

注意事项 #

• 如果使用Plotly.js在网页端实现，逻辑完全一致，仅语法按照JS规范调整即可
• 实际使用时可根据显示效果微调y、sizex、sizey参数，避免图标和图表主体重叠
• 若需要给图标添加点击等交互效果，可额外绑定Plotly的坐标区域事件监听实现

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