Question

具有以下功能：

def plot_radar_analysis(df_team_matches, team=None, gameweek=None, kip=None):

  from math import pi
  import plotly.express as px
  from colors import full_team_colors

  gameweeks=range(1,gameweek+1)

  df_temp = df_team_matches.loc[(df_team_matches['ForTeam']==team[0])
                                &(df_team_matches['GameWeek'].isin(gameweeks))]

  indicator = df_temp[kip[0]]

  R = list(indicator.values)
  theta = [('Rodada ' + str(i)) for i in list(df_temp['GameWeek'].values)]

  color = full_team_colors[team[0]]

  df = pd.DataFrame(dict(
    r=R,
    theta=theta))

  fig = px.line_polar(df, r='r', theta='theta', line_close=True, title=f'{team[0]} - {kip[0]}')
  fig.update_polars(angularaxis_type="category") 
  fig.update_traces(fill='toself', line_color=color)
  fig.update_traces(mode="markers+lines")

  return fig

我对此作图：

不，我想在雷达图上添加样式，并在主图中添加一些低不透明度形状，以使背景看起来像这样：

请注意，与足球相关的形状应保留在背景中，红色区域将位于这些形状的顶部。

对于我如何绘制这些形状并获得与上图类似的结果，有人可以向我指出正确的方向吗？

Answer 1

也许有更好的方法可以做到这一点，但这就是我的发现。

使极地网格透明

通过向您的bgcolor="rgba(0, 0, 0, 0)"调用添加fig.update_polars参数，使网格的背景色透明。（最后一个零很重要，其他值无关紧要）

    fig.update_polars(angularaxis_type="category",
                      bgcolor="rgba(223, 223, 223, 0)")

将图像添加到背景

使用pillow从硬盘上的文件创建图像对象
添加图片

from PIL import Image

fig.add_layout_image(
    dict(source=Image.open('bg_football.jpg'),
            xref="paper",
            yref="paper",
            x=0.5,
            y=0.5,
            sizex=1,
            sizey=1,
            sizing="contain",
            xanchor="center",
            yanchor="middle",
            opacity=0.5,
            layer="below"))

https://plotly.com/python/images/

xref='paper'和yref='paper'使图像相对于纸张定位。如果xref='x'和yref='y'，则使用直角坐标轴定位图像。我找不到相对于极坐标定位图像的可能性。
x=0.5, y=0.5, xanchor='center', yanchor='middle'使图像居中。
sizing="contain"保持图像大小不变。其他可能的值为“ contain”和“ stretch”。
source可以是URL字符串或PIL.Image实例。

结果图

注释

如果需要调整CSS以使图像在每种情况下和屏幕尺寸等都与绘图相同，则：图像将放置在<g class=layer-below>中的DOM中，这是不同的从<g>元素到极坐标图（<g class=polarlayer>），它们有一个共同的父级<svg class=main-svg>，后者有父级<div class=svg-container>。

绘图-在雷达图上绘制背景形状

1 个答案:

使极地网格透明

将图像添加到背景

结果图

注释

其他资源