我有以下示例flexdashboard:
---
title: "Hover"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
data(iris)
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
iris %>% group_by(Species) %>%
summarise(mean = mean(Sepal.Length)) %>%
ggplot(aes(Species, mean)) + geom_col()
将鼠标悬停在图中的条形图上并显示其值时,我想要的是一个工具提示。我在SO concurrent future中阅读了这篇文章,但它适用于Shiny。我尝试过:
p <- iris %>% group_by(Species) %>%
summarise(mean = mean(Sepal.Length))
labels <- sprintf("<strong>%s</strong><br/>Mean: %f",
p$Species, p$mean) %>%
lapply(htmltools::HTML)
p %>% ggplot(aes(Species, mean)) + geom_col() + geom_text(aes(label = labels))
这将创建一个具有种类和值的html工具,我没有的是悬停(可能是plot_hover?)来显示工具提示。
任何帮助将不胜感激
此致
答案 0 :(得分:4)
这是一种方法。您必须定位到条的顶部中心才能获得工具提示。
---
title: "Untitled"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(dplyr)
library(ggplot2)
library(shiny)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
dat <- iris %>% group_by(Species) %>%
summarise(mean = mean(Sepal.Length))
output[["ggplot"]] <- renderPlot({
dat %>%
ggplot(aes(Species, mean)) + geom_col()
})
output[["hoverinfo"]] <- renderUI({
hover <- input[["plot_hover"]]
if(is.null(hover)) return(NULL)
point <- nearPoints(dat, hover, threshold = 50, maxpoints = 1)
if(nrow(point) == 0) return(NULL)
left_px <- hover$coords_css$x
top_px <- hover$coords_css$y
style <-
paste0("position:absolute; z-index:100; background-color: rgba(245, 245, 245, 0.85); ",
"left:", left_px,
"px; top:", top_px, "px;")
# tooltip created as wellPanel
tooltip <- paste0(
"<b> Species: </b>", point[["Species"]], "<br/>",
"<b> mean: </b>", point[["mean"]]
)
wellPanel(
style = style, p(HTML(tooltip))
)
})
plotOutput("ggplot", hover = hoverOpts("plot_hover"))
div(uiOutput("hoverinfo"), style = "pointer-events: none;")
```
答案 1 :(得分:1)
我用shinyBs尝试了许多不同的选项,其他人描述了here,但是我在不使用runtime: shiny
的情况下添加工具提示仍然有问题,所以我添加了
output:
includes:
in_header: my_custom.html
在 my_custom.html
我有:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( document ).tooltip(
{
position: {
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
},
show: {
effect: "slideDown",
delay: 500
}
}
);
} );
</script>
可以找到其他样式选项here