将鼠标悬停在闪亮的应用程序中的R图表中的图像

问题描述

这里有人在将鼠标悬停在地块或任何可以这样做的包装上时显示图像的示例吗?我已经尝试了一些东西，但它只会显示url而不会显示图像.我知道这段代码只是封装了URL.如何建立一个div来显示图像.

Does anyone here have an example of showing an image when hovered on a plot or any package which can do this? I have tried something but it will show url only but not the image.I know this code is just encasing the URL. How can I build a div to show the image.

library(shiny)
library(shinydashboard)
library(DT)
library(dplyr)
library(plotly)

# Data ------------------------------------------------------------------
dt <- data.frame(fruits = c("apple","banana","oranges"),
  rank = c(11, 22, 33), 
  image_url = c(
    'https://images.unsplash.com/photo-1521671413015-ce2b0103c8c7?ixlib=rb-0.3.5&s=45547f67f01ffdcad0e33c8417b840a9&auto=format&fit=crop&w=667&q=80',             
    "https://images.unsplash.com/photo-1520699697851-3dc68aa3a474?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef15aee8bcb3f5928e5b31347adb6173&auto=format&fit=crop&w=400&q=80",                        
    "https://images.unsplash.com/photo-1501925873391-c3cd73416c5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=379e4a0fffc6d11cd5794806681d0211&auto=format&fit=crop&w=750&q=80"
))

# img_dt <- dt %>%
#   mutate(img = paste0("<a target='_blank' href='", image_url, "'><img src=\'", image_url, "' height='40'></img></a>")) %>%
#   mutate(link = paste0("<a href='", image_url,"' target='_blank'>","View photo","</a>")) 

# Dashboard ----------------------------------------------------------------
ui <- dashboardPage(
  dashboardHeader(title = "Test"),

  dashboardSidebar(),

  dashboardBody(
    tags$head(
      tags$style(
        HTML(
          "img.small-img {
          max-width: 75px;
          }")
      )
    ),

    plotlyOutput("hoverplot")
  )
)

server <- function(input, output) {

  output$hoverplot <- renderPlotly({
    plot_ly(
      dt,
      x         = ~fruits,
      y         = ~rank,
      type      = 'scatter',
      mode      = 'markers',
      hoverinfo = 'text',
      text      = ~ paste(
        'Species: ', fruits,
        '</br> Creative: ', paste0(
          "<a target='_blank' href='", image_url, "'><img src=\'",
          image_url,
          "' height='40'></img></a>"
          )
        )
      )
    })
}

shinyApp(ui = ui, server = server)

推荐答案

如@StéphaneLaurent所说，它是不可能直接使用plotly的hoverinfo显示图像.

As stated by @StéphaneLaurent it's not possible to show an image directly using plotly's hoverinfo.

但是，这是基于@ mb158127已经提到的customdata参数的解决方法.

However, here is a workaround based on the customdata argument already mentioned by @mb158127.

这还考虑了hover_event的x和y位置:

This also takes into account the x and y position of the hover_event:

library(shiny)
library(shinydashboard)
library(plotly)

# Data ------------------------------------------------------------------
dt <- data.frame(
  fruits = c("apple", "banana", "oranges"),
  rank = c(11, 22, 33),
  image_url = c(
    'https://images.unsplash.com/photo-1521671413015-ce2b0103c8c7?ixlib=rb-0.3.5&s=45547f67f01ffdcad0e33c8417b840a9&auto=format&fit=crop&w=667&q=80',
    "https://images.unsplash.com/photo-1520699697851-3dc68aa3a474?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef15aee8bcb3f5928e5b31347adb6173&auto=format&fit=crop&w=400&q=80",
    "https://images.unsplash.com/photo-1501925873391-c3cd73416c5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=379e4a0fffc6d11cd5794806681d0211&auto=format&fit=crop&w=750&q=80"
  )
)

# Dashboard ----------------------------------------------------------------
ui <- dashboardPage(
  dashboardHeader(title = "Test"),
  dashboardSidebar(),
  dashboardBody(tags$head(tags$style(
    HTML("img.small-img {
          max-width: 75px;
          }")
  )),
  plotlyOutput("hoverplot"))
)

server <- function(input, output, session) {
  output$hoverplot <- renderPlotly({
    plot_ly(
      dt,
      x         = ~ fruits,
      y         = ~ rank,
      type      = 'scatter',
      mode      = 'markers',
      hoverinfo = 'none',
      source = "hoverplotsource",
      customdata = ~ image_url
    ) %>%
      event_register('plotly_hover') %>%
      event_register('plotly_unhover')
  })

  hover_event <- reactive({
    event_data(event = "plotly_hover", source = "hoverplotsource")
  })

  unhover_event <- reactive({
    event_data(event = "plotly_unhover", source = "hoverplotsource")
  })

  hoverplotlyProxy <- plotlyProxy("hoverplot", session)

  observeEvent(unhover_event(), {
    hoverplotlyProxy %>%
      plotlyProxyInvoke("relayout", list(images = list(NULL)))
  })

  observeEvent(hover_event(), {
    hoverplotlyProxy %>%
      plotlyProxyInvoke("relayout", list(images = list(
        list(
          source = hover_event()$customdata,
          xref = "x",
          yref = "y",
          x = hover_event()$x,
          y = hover_event()$y,
          sizex = 20,
          sizey = 20,
          opacity = 1
        )
      )))
  })
}

shinyApp(ui = ui, server = server)

这里您可以找到有关在这种情况下如何使用本地图像的后续问题.

Here you can find a follow-up question on how to use local images in this scenario.

这篇关于将鼠标悬停在闪亮的应用程序中的R图表中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！