有没有一种方法可以让我的足球投篮地图使用 plotly/widgets 或其他东西进行交互？答案

【问题标题】：Is there a way I can make my football shot map interactive using plotly/widgets or something else?有没有一种方法可以让我的足球投篮地图使用 plotly/widgets 或其他东西进行交互？
【发布时间】：2026-01-13 02:40:01
【问题描述】：

我使用 matplotlib 创建了一个射门图，它目前不是交互式的，只是球员所有射门的静态图像（进球、阻挡、扑救、错过）

我用来创建音高图的代码可以在这里找到：https://fcpython.com/visualisation/drawing-pitchmap-adding-lines-circles-matplotlib

以下是用于绘制镜头图的python代码：

# Plotting Shots Horizontal Full Pitch

draw_pitch("#3E3E40","#faf0e6","horizontal","full")

x = df_salah['XM'].tolist()
y = df_salah['YM'].tolist()
y1 = [68 - i for i in y]

## Add Z variable for xG
z = df_salah['xG'].tolist()
z1 = [500 * i for i in z] # This is to scale the "xG" values for plotting

## Add small legend in the bottom corner
mSize = [0.05,0.10,0.2,0.4,0.6,1]
mSizeS = [500 * i for i in mSize]
mx = [5.5,7,9,11,13.5,16.5]
my = [60,60,60,60,60,60]

colors = {'Goal':'Green', 'MissedShots':'Purple', 'BlockedShot':'Red', 'SavedShot':'Blue', 'ShotOnPost':'Yellow'}
## markers = {'Goal':'Star', 'MissedShots':'X', 'BlockedShot':'O', 'SavedShot':'V', 'ShotOnPost':'S'}

plt.text(11,55,"xG", color="white", ha="center",va="center", zorder=zo, fontsize=16)
plt.scatter(x,y,s=z1, marker='o',color=df_salah['result'].map(colors),edgecolors="black", zorder=zo)
plt.scatter(mx,my,s=mSizeS,facecolors="white", edgecolor="white",zorder=zo)
plt.plot([5.5,17], [57,57],color="white",lw=2,zorder=zo)

i = 0

for i in range(len(mx)):
    plt.text(mx[i], my[i], mSize[i], fontsize=mSize[i]*18, color="#195905", zorder=zo,ha="center", va="center")

    
## Title
plt.title("Mohamed Salah Shots 19/20 Season")

plt.show()

我想要做的是通过添加过滤器（小部件）来实现交互，这样我就可以过滤所拍摄的镜头类型，这样地图只会在地图上显示特定类型的镜头，例如如果我过滤“目标”，那么地图应该只显示导致目标的射门，等等。

我还想从 plotly 添加“悬停”功能，如果您将鼠标悬停在镜头上，它会告诉您“xG”值、镜头时间等。

当使用 plotly 时，我无法弄清楚如何保留音高图。我尝试了以下结果：

trace1 = px.scatter(df_salah, x='XM', y='YM', color='result')
fig = go.FigureWidget(trace1)

Plotly Test

我还想保持圆圈的缩放比例

有人可以帮我从代码开始吗？因为我对如何执行此操作有点迷茫，或者我什至使用的是正确的库/平台吗？

【问题讨论】：

Yes, it is possible。但是您的代码特定问题是什么？
@Mr.T 我如何编写这样的代码？
通过开始适应其他人（如链接中的）所做的事情来满足您的需求。如果遇到问题，请阅读event handling 上的文档并查看examples in the gallery 如何解决类似问题。如果你然后遇到一个特定的问题，你会来问一个与代码相关的特定问题。没有人会为你编写完整的代码。
@Mr.T 谢谢，我明白了，但我不知道如何在使用 plotly 时保留我的音高图，这是我想首先弄清楚的。
好吧，首先，您可以决定要使用的平台。看起来，您想使用 plotly - 那么为什么将其标记为 matplotlib？而在 dadduckgo 上的第一个热门是：tutorialspoint.com/plotly/…

标签： python pandas matplotlib plotly ipywidgets

【解决方案1】：

你想解决几个问题，但你想先用 plotly 来应用你的音调，所以我只回答那个。在官方参考中可以看到，可以使用 PIL 库来显示背景图片。

使用您显示的库保存图像。（您展示的代码有参数，但库没有该功能。
添加带有fig.add_layout_image() 的情节背景图像。这将完成基本功能，但您需要进行一些调整，例如计算偏离间距和修改图形大小。

fig=plt.figure(figsize=(15, 10.38), dpi=100, facecolor='#3E3E40')
...
plt.savefig('plotly_add_pitch.png', format='png', bbox_inches='tight', pad_inches=0)

import plotly
import plotly.graph_objects as go
from PIL import Image

img = Image.open('./plotly_add_pitch.png')
fig = go.Figure()

fig.add_trace(
    go.Scatter(x=[0, 110, 112, 114, 115, 130],
               y=[0, 65, 55, 49, 53, 90],
                mode='markers',
                marker=dict(size=15,
                color='red'),
               name='Salah'
))

# axis hide、yaxis reversed
fig.update_layout(
    autosize=False,
    width=1163,
    height=783,
    xaxis=dict(visible=True,autorange=True),
    yaxis=dict(visible=True,autorange='reversed')
)

# background image add
fig.add_layout_image(
    dict(source=img,
         xref='x',
         yref='y',
         x=0,
         y=0,
         sizex=135,
         sizey=95,
         sizing='stretch',
         opacity=0.9,
         layer='below')
)

# Set templates
fig.update_layout(template="plotly_white")

fig.show()

X 轴和 Y 轴已显示，但实际上您应该将它们更改为 visible=False。

【讨论】：