python - 有没有办法让我的足球投篮地图使用情节/小部件或其他东西进行互动？

Question

我使用 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)

情节测试

我也想保持圆圈的比例

有人可以帮我从代码开始吗，因为我对如何做到这一点有点迷失，或者我什至在使用正确的库/平台吗？

标签： pythonpandasmatplotlibplotlyipywidgets

Answer 1

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

1. 使用您显示的库保存图像。（您显示的代码具有参数，但库没有该功能。
2. 添加带有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()

visible=False显示了 X 和 Y 轴，但您应该在实践中将它们更改为。