Plotly - рисование фоновых фигур на радиолокационном графике - PullRequest
Новая
       11

Plotly - рисование фоновых фигур на радиолокационном графике

2 голосов
/ 09 июля 2020

С помощью следующей функции: 

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

Я рисую это:

enter image description here

No I would like to add style to my radar plot, and add some low opacity shapes to my main figure in order to have the background look like this:

введите описание изображения здесь

Обратите внимание, что фигуры, связанные с футболом, должны оставаться на заднем плане, а красная область будет go поверх них.

Может ли кто-нибудь указать мне в правильном направлении, как я могу нарисовать эти формы и добиться результата, похожего на изображение выше?

1 Ответ

2 голосов
/ 12 июля 2020

Может быть, есть лучший способ сделать это, но вот что я нашел.

Сделать полярную сетку прозрачной

  • Сделайте цвет фона сетки прозрачным, добавив 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 экземпляром.

Итоговая цифра

results

Notes

  • In case you need to tweak the CSS to make the image be the same size as the plot in every situation & screen size etc.: The image will be placed in the DOM inside a , which is different from the -element with your polar plot () and they have a common parent , which has parent .

Additional resources

...