将鼠标悬停在闪亮的 ggplot 上时的工具提示

Posted 2023-02-22

【中文标题】将鼠标悬停在闪亮的 ggplot 上时的工具提示

【英文标题】：ToolTip when you mouseover a ggplot on shiny

【发布时间】：2015-03-13 23:50:56

【问题描述】：

我正在构建一个闪亮的应用程序。

我正在使用 ggplot 绘制图表。

当我将鼠标悬停在图表上的点上时，我想要一个工具提示，显示数据框中的一列（可自定义的工具提示）

您能否建议最好的前进方式。

简单的应用程序：

# ui.R

shinyUI(fluidPage(
 sidebarLayout(
    sidebarPanel(
        h4("TEst PLot")),
    mainPanel(
        plotOutput("plot1")
    )
)
))

# server.R

library(ggplot2)
data(mtcars)

shinyServer(
function(input, output) 
    output$plot1 <- renderPlot(
        p <- ggplot(data=mtcars,aes(x=mpg,y=disp,color=factor(cyl)))
        p <- p + geom_point()
        print(p)
    )

)

当我将鼠标悬停在点上时，我希望它显示 mtcars$wt

【问题讨论】：

查看 Rcharts：***.com/questions/17524227/… 或 GooglveVis：cran.r-project.org/web/packages/googleVis/vignettes/…

谢谢。我确实使用它们。但我想使用 ggplot 进行绘图。并利用其充分的灵活性。我只需要一个工具提示。

animint 是一个将 ggplot2 转换为 SVG 的 R 包。这是在闪亮中嵌入 ggplot2/animint 图的示例 -- cpsievert.shinyapps.io/animintShiny 要添加工具提示，您可以将 tooltip=wt 放在 aes() 中

另一种选择是使用 gridSVG 包自己转换为 SVG，然后使用 SVGAnnotation 包添加工具提示。

新的 shinyBS 包可能对这一特定需求非常有帮助：ebailey78.github.io/shinyBS/docs/…。它为闪亮添加了额外的引导功能，工具提示是其中的一部分。

【参考方案1】：

如果我正确理解了这个问题，这可以通过最近更新 ggplot2 和基本包的闪亮包来实现。使用 Winston Chang 和 Joe Cheng http://shiny.rstudio.com/gallery/plot-interaction-basic.html 的这个例子，我能够解决这个问题。悬停现在是 plotOutput() 的输入参数，因此它与逐字文本输出一起添加到 ui 以显示悬停点的 mtcars$wt。

在服务器中，我基本上创建了一个距离向量，它计算从鼠标到绘图中任何点的距离，如果该距离小于 3（在此应用程序中有效），则它显示 mtcars$wt 为最近的点你的鼠标。要清楚 input$plot_hover 返回有关鼠标位置的信息列表，并且在此示例中仅从 input$plot_hover 中提取 x 和 y 元素。

library(ggplot2)
library(Cairo)   # For nicer ggplot2 output when deployed on Linux

ui <- fluidPage(
    fluidRow(
        column(width = 12,
               plotOutput("plot1", height = 350,hover = hoverOpts(id ="plot_hover"))
        )
    ),
    fluidRow(
        column(width = 5,
               verbatimTextOutput("hover_info")
        )
    )
)

server <- function(input, output) 


    output$plot1 <- renderPlot(

        ggplot(mtcars, aes(x=mpg,y=disp,color=factor(cyl))) + geom_point()

    )

    output$hover_info <- renderPrint(
        if(!is.null(input$plot_hover))
            hover=input$plot_hover
            dist=sqrt((hover$x-mtcars$mpg)^2+(hover$y-mtcars$disp)^2)
            cat("Weight (lb/1000)\n")
            if(min(dist) < 3)
                mtcars$wt[which.min(dist)]
        


    )

shinyApp(ui, server)

我希望这会有所帮助！

【讨论】：

非常酷@Solvi。谢谢！

【参考方案2】：

您还可以使用一点点 JQuery 和条件 renderUI 在指针附近显示自定义工具提示。

library(shiny)
library(ggplot2)

ui <- fluidPage(

  tags$head(tags$style('
     #my_tooltip 
      position: absolute;
      width: 300px;
      z-index: 100;
     
  ')),
  tags$script('
    $(document).ready(function()
      // id of the plot
      $("#plot1").mousemove(function(e) 

        // ID of uiOutput
        $("#my_tooltip").show();         
        $("#my_tooltip").css(             
          top: (e.pageY + 5) + "px",             
          left: (e.pageX + 5) + "px"         
        );     
      );     
    );
  '),

  selectInput("var_y", "Y-Axis", choices = names(mtcars), selected = "disp"),
  plotOutput("plot1", hover = hoverOpts(id = "plot_hover", delay = 0)),
  uiOutput("my_tooltip")
)

server <- function(input, output) 

  data <- reactive(
    mtcars
  )

  output$plot1 <- renderPlot(
    req(input$var_y)
    ggplot(data(), aes_string("mpg", input$var_y)) + 
      geom_point(aes(color = factor(cyl)))
  )

  output$my_tooltip <- renderUI(
    hover <- input$plot_hover 
    y <- nearPoints(data(), input$plot_hover)[ ,c("mpg", input$var_y)]
    req(nrow(y) != 0)
    verbatimTextOutput("vals")
  )

  output$vals <- renderPrint(
    hover <- input$plot_hover 
    y <- nearPoints(data(), input$plot_hover)[ , c("mpg", input$var_y)]
    # y <- nearPoints(data(), input$plot_hover)["wt"]
    req(nrow(y) != 0)
    # y is a data frame and you can freely edit content of the tooltip 
    # with "paste" function 
    y
  )

shinyApp(ui = ui, server = server)

---

已编辑：

在这篇文章之后，我搜索了互联网，看看它是否可以做得更好，并找到了thisggplot 的精彩自定义工具提示。我相信没有比这更好的了。

【讨论】：

很棒的发现！您编辑中的链接是我见过的最好的解决方案。需要记住的是，Pawel 没有提到，如果您缩放图表的任一轴，则需要在使用 hover$x 和/或 hover$y 变量之前对其应用类似的转换。

【参考方案3】：

使用plotly，您可以将您的ggplot 转换为它自己的交互式版本。只需在 ggplot 对象上调用函数 ggplotly：

library(plotly)

data(mtcars)

shinyApp(
ui <- shinyUI(fluidPage(
  sidebarLayout(sidebarPanel( h4("Test Plot")),
    mainPanel(plotlyOutput("plot1"))
  )
)),

server <- shinyServer(
  function(input, output) 
    output$plot1 <- renderPlotly(
      p <- ggplot(data=mtcars,aes(x=mpg,y=disp,color=factor(cyl)))
      p <- p + geom_point()

      ggplotly(p)
    )
  
))

shinyApp(ui, server)

有关工具提示中显示的自定义内容，请查看例如here.

【参考方案4】：

我和我的同事一起发布了一个名为 GGTips 的包（它不在 CRAN 上），它就是这样做的，在绘图上添加了工具提示。我们创建了自己的解决方案，因为我们无法使用与 ggplot2 不 100% 兼容的 plotly 重新创建复杂的绘图。 Git repo 有一个在线演示的链接。

【讨论】：

你的图书馆非常适合这个目的。当我尝试它时，我注意到在服务器函数中使用了renderUI 而不是renderPlots。此功能阻止我使用renderPlots 中的hover 和brush 功能。您有获得hover 和brush 功能的解决方案吗？ （PS：我需要他们为表格输出提取选定的数据点）

@AliAltıntaş 你可以在 GitHub 上创建问题 我需要看看，我不是 R 专家。不知道 hover 和 brush 做什么，需要调查.