2

具有以下功能：

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

我绘制这个：

在此处输入图像描述

不，我想为我的雷达图添加样式，并为我的主要人物添加一些低不透明度的形状，以使背景看起来像这样：

在此处输入图像描述

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

谁能指出我如何绘制这些形状并获得类似于上图的结果的正确方向？

4

1 回答 1

2

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

使极坐标网格透明

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

将图像添加到背景

  • 使用枕头从硬盘上的文件创建图像对象
  • 添加图像
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"保持图像大小不变。其他可能的值是“包含”和“拉伸”。
  • source可以是 URL 字符串或PIL.Image实例。

结果图

结果

笔记

  • 如果您需要调整 CSS 以使图像在每种情况和屏幕尺寸等情况下与绘图的大小相同：图像将放置在 a 内的 DOM 中，这与极坐标图的 -element<g class=layer-below>不同<g>( <g class=polarlayer>) 并且他们有一个共同的父母<svg class=main-svg>，他们有父母<div class=svg-container>。

其他资源

于 2020-07-12T13:21:05.857 回答