用图像替换 x 轴刻度标签答案

【问题标题】：Plotly replace x-axis tick labels with images用图像替换 x 轴刻度标签
【发布时间】：2021-04-02 14:04:39
【问题描述】：

我正在绘制一个散点图来展示所有 NFL 球队的防守。我想在底轴上显示他们的图像，而不是纯文本中的名称。有可能这样做吗？这是我能想到的代码 sn-p：

fig = px.scatter(df, x='defensiveTeam', y='passResult')
fig.show()

请注意，我的图像存储在本地。

【问题讨论】：

标签： python plotly data-visualization

【解决方案1】：

据我所知，我找不到将图像放置在 x 轴上的方法。可以使用以下代码将图像放置在散点上，这会擦除 x 轴上的刻度，但应在图表上显示它们。

import plotly.express as px
import base64

x=[0, 1, 2, 3, 4]
y=[2, 1, 4, 9, 16]

fig = px.scatter(x=x, y=y)

team_logos = ['arizona_cardinals.png','atlanta_falcons.png','carolina_panthers.png','chicago_bears.png','dallas_cowboys.png']

fig.update_xaxes(tickvals=['','','','',''])
fig.update_layout(yaxis_range=[0,20])

# add images
for i,src,yy in zip(range(len(team_logos)),team_logos,y):
    logo = base64.b64encode(open('./data/'+src, 'rb').read())
    fig.add_layout_image(
        source='data:image/png;base64,{}'.format(logo.decode()),
        xref="x",
        yref="y",
        x=i,
        y=yy,
        xanchor="center",
        yanchor="bottom",
        sizex=3,
        sizey=3,
    )

fig.show()

【讨论】：

把图片目录改成本地的就不行了。
要处理本地图像，您需要将它们转换为 base64 格式。代码已更新。