Início / coding / Perguntas / 79471731
Accepted
sactyr
Asked: 2025-02-27 14:06:12 +0800 CST

Incorporar imagens em rótulos de marcação do Plotly

  • 772

Gostaria de incorporar imagens como parte do eixo x em um gráfico plotly (não no lugar do eixo x). Código do que tentei:

library(plotly)
library(dplyr)
library(tidyr)

Animals <- c("giraffes", "orangutans", "monkeys")
SF_Zoo <- c(20, 14, 23)
LA_Zoo <- c(12, 18, 29)
data <- data.frame(Animals, SF_Zoo, LA_Zoo) %>% 
  pivot_longer(cols = c(SF_Zoo, LA_Zoo)) %>% 
  mutate(Animals = paste(Animals, "<img src='https://images.plot.ly/language-icons/api-home/r-logo.png'</img>"))


plot_ly(data, x = ~Animals, y = ~value, type = 'bar', color = ~name) %>%
  layout(
    barmode = "stack"
  )

Imagem do código acima

Como pode ser visto, as imgtags são impressas como string literal. Eu tentei envolver as etiquetas de marcação Animalscom, htmltools::HTMLmas sem sucesso.

Este guia do plotly fala sobre incorporar imagens/logotipos dentro da área do plot, mas eu gostaria de incorporar imagens como parte dos rótulos de marcação. E esta solução Python SO substitui os rótulos de marcação por imagens inteiramente.

2 respostas

  1. Infelizmente, diferentemente do Plotly em Python, o R não suporta diretamente a incorporação de imagens dentro de rótulos de tick. No entanto, podemos obter esse efeito usando imagens de fundo e posicionamento manual.

    O código a seguir adiciona as imagens que você precisa, mas talvez você queira alterar os parâmetros do imagesobjeto para adicioná-las corretamente ao seu gráfico.

    library(plotly)
library(dplyr)
library(tidyr)

# Sample data
Animals <- c("Giraffes", "Orangutans", "Monkeys")
SF_Zoo <- c(20, 14, 23)
LA_Zoo <- c(12, 18, 29)

# Convert data to long format
data <- data.frame(Animals, SF_Zoo, LA_Zoo) %>% 
  pivot_longer(cols = c(SF_Zoo, LA_Zoo))

# Create the bar chart
p <- plot_ly(data, x = ~Animals, y = ~value, type = 'bar', color = ~name) %>%
  layout(
    barmode = "stack",
    xaxis = list(title = "Animals", tickvals = c(0, 1, 2), ticktext = Animals),
    images = list(
      list(source = "https://images.plot.ly/language-icons/api-home/python-logo.png",
           xref = "paper",
           yref = "paper",
           x= 0,
           y= 0,
           sizex = 0.1,
           sizey = 0.1,
           opacity = 0.8
      ),
      
      list(source = "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
           xref = "x",
           yref = "paper",
           x = 1,
           y = 0,
           sizex = 0.2,
           sizey = 0.2,
           opacity = 0.8z
      ),
      
      list(source =  "https://images.plot.ly/language-icons/api-home/python-logo.png",
           xref = "x",
           yref = "paper",
           x = 1.5,
           y = 0,
           sizex = 0.1,
           sizey = 0.1,
           sizing = "stretch",
           opacity = 0.8
      )
    )
  )

# Display the plot
p

    resultado

    • 1
  2. Best Answer

    Assim como na resposta do python , você pode colar as imagens no layout iterando sobre os valores x dos seus dados. Para isso, você pode usar lapplypara construir a lista de imagens. Use xref = "x"conforme descrito aqui . Eu também criaria algum espaço abaixo do gráfico para as imagens usando margin = list(b = 150), mas você também pode empurrá-las para uma camada de fundo usando layer="below". Você pode então usar xanchor = "center"para sempre centralizar as imagens.

    fora

    Código

    library(plotly)
library(dplyr)
library(tidyr)

Animals <- c("giraffes", "orangutans", "monkeys")
imgs <- c(
  "https://cdn.pixabay.com/photo/2017/04/11/21/34/giraffe-2222908_640.jpg",
  "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRfPhPFLZSG51k0T3Mg0m8EWmek_sDLO9LsAh8kbVoOkzVHFKdAsbZmY4xfaIMVFq4uxcUKWV8LkS8D_nwK2AsTmA",
  "https://cdn.mos.cms.futurecdn.net/ZRAWdgHeNNPw8PaSxg7kVj-1200-80.jpg"
)

SF_Zoo <- c(20, 14, 23)
LA_Zoo <- c(12, 18, 29)
data <- data.frame(Animals, SF_Zoo, LA_Zoo) %>% 
  pivot_longer(cols = c(SF_Zoo, LA_Zoo))

img_list <- lapply(seq_along(Animals), function(i, size = 0.4) {
  list(
    source = imgs[i],  
    xref = "x",       
    yref = "paper",   
    x = Animals[i],   
    y = -0.15,        
    sizex = size, sizey = size,
    xanchor = "center"
  )
})

plot_ly(data, x = ~Animals, y = ~value, type = 'bar', color = ~name) %>%
  layout(
    barmode = "stack",
    images = img_list,
    margin = list(b = 150) # adjust bottom margin
  )
    • 1

relate perguntas