代码之家 › 专栏 › 技术社区 › Gopala

使用shinyBS包中的bsModal和plotly R plotly_click在弹出窗口中生成新绘图

shinybs plotly shiny r

Gopala · 技术社区 · 8 年前

下面是我使用的一个基本闪亮应用程序的代码 plotly_click 事件以选择性地显示另一个绘图。我希望侧框图以模式弹出窗口呈现,而不是在页面的一侧。

library(shiny)
library(plotly)

df1 <- data.frame(x = 1:10, y = 1:10)
df2 <- data.frame(x = c(rep('a', 10), rep('b', 10)),
                  y = c(rnorm(10), rnorm(10, 3, 1)))

ui <- fluidPage(
  column(6, plotlyOutput('scatter')),
  column(6, plotlyOutput('box'))
)

server <- function(input, output) {
  output$scatter <- renderPlotly({
    plot_ly(df1, x = x, y = y, mode = 'markers', source = 'scatter')
  })

  output$box <- renderPlotly({
    eventdata <- event_data('plotly_click', source = 'scatter')
    validate(need(!is.null(eventdata),
                  'Hover over the scatter plot to populate this boxplot'))


    plot_ly(df2, x = x, y = y, type = 'box')
  })
}

shinyApp(ui = ui, server = server)

我能理解这个问题( Shiny: plot results in popup window )和响应,并尝试将其用于 trigger 属于 单击(plotly_click) 没有成功。你知道如何用一个巧妙的鼠标悬停点击事件来完成同样的事情吗?

更新:我可以清楚地看到 plotly 可以在 shinyBS 这段代码演示了模态弹出窗口。

df1 <- data.frame(x = 1:10, y = 1:10)
ui <- fluidPage(
  actionButton('go', 'Click Go'),
  bsModal('plotlyPlot', 'Here is a Plot', 'go', plotlyOutput('scatter1'))
)

server <- function(input, output) {
  output$scatter1 <- renderPlotly({
    plot_ly(df2, x = x, y = y, mode = 'markers', source = 'scatter1')
  })
}

shinyApp(ui = ui, server = server)

而不是 actionButton 作为触发器,我想要 单击(plotly_click) 或 plotly_hover as there触发器(在原始示例中)。

2 回复 | 直到 7 年前

shosaco 7 年前

你可以使用 toggleModal ,只需将此添加到服务器:

observeEvent(event_data("plotly_click", source = "scatter"), {
 toggleModal(session, "boxPopUp", toggle = "toggle")
})

并将框Plot in an bsModal(标题和触发器为空):

ui <- fluidPage(
  column(6, plotlyOutput('scatter')),
  bsModal('boxPopUp', '', '', plotlyOutput('box'))
)

更新: 使用闪亮的内置Modal功能(自shiny 0.14起),只需添加服务器即可:

 observeEvent(event_data("plotly_click", source = "scatter"), {
                showModal(modalDialog(
                        renderPlotly({
                                plot_ly(df2, x = ~x, y = ~y, type = 'box')
                        })
                ))
        })

gdlmx 8 年前

使用CSS

你可以使用 HTML builder 以包含绘图并使用样式表添加动态效果。

ui <- fluidPage(
  includeCSS(path_to_css_file),
  div( class='mainchart',
    column(6, plotlyOutput('scatter')),
    div(  class='popup',
        column(6, plotlyOutput('box'))
       )
    )
)

CSS公司

div.popup {
   display : none;
   position: absolute;
}
div.mainchart : focus > div.popup {
   display : block;
}
div.mainchart {
   position: relative;
}

使用Javascript

你可以巧妙地使用 embeded-API 设置侧盒的可见性。

闪亮BS

既然你想坚持shinyBS,你可以使用 bsPopover 用一个小技巧来实现。我想你已经知道怎么用了 bsModel 这与下面的示例类似。

将以下参数传递给 fluidPage

bsTooltip(id, title, placement = "bottom", trigger = "click", content=column(6, plotlyOutput('box'))  )

这将创建带有 Popover 包装机。我还没有测试它。如果出现错误,您也可以尝试

options = list()
options$content = column(6, plotlyOutput('box'))
options$html = T # otherwise the conent will be converted to text
bsTooltip(id, title, placement = "bottom", trigger = "click",  options=options  )

访问此 source file shinyBS和 popover(options) 的函数 bootstrap 了解更多信息。