javascript - 使用 Javascript 在 Shiny 中配置 googleVis 事件监听器

Question

基本上，我有一个 gvisCalendar来自 Shiny 应用程序中 googleVis 包的图表，我想在图表下方显示一个与所选框相对应的数据表。

我可以通过将 gvis.listener.jscode 参数设置为包含一串 javascript 代码的变量来添加事件监听器。例如，使用此代码，我可以调出所选日历日期的维基百科页面:

output$dates_plot <- renderGvis({
      gvisCalendar(calendar.ddply,
                   options = list(
                                  colorAxis = "{
                                      minValue: 0,  
                                      colors: ['E9967A', 'A52A2A']
                                   }",
                  gvis.listener.jscode = jscode2 )
          )
    })

    jscode2<- "window.open('http://en.wikipedia.org/wiki/'
              + data.getValue(chart.getSelection()[0].row,0)); "

使用这段代码，我运行了我的程序，选择了“2015 年 6 月 16 日”框，我的浏览器上出现了一个新的标签页:https://en.wikipedia.org/wiki/Tue_Jun_16_2015_00:00:00_GMT-0400_(EDT)

我实际上并不想对维基百科做任何事情，我只是用它作为例子。

我要做的就是将所选日历框的日期保存为 R 对象，这样我就可以显示与该日期对应的数据表。

我几乎没有使用 javascript 的经验。谢谢!

Answer 1

您可以使用 Shiny.onInputChange 将数据发送回服务器。这是一个例子:

library(shiny)
library(googleVis)
server <- function(input, output) {
        output$dates_plot <- renderGvis({
                gvisCalendar(Cairo,
                             options = list(
                                     colorAxis = "{
                                      minValue: 0,  
                                      colors: ['E9967A', 'A52A2A']
                                   }",
                                     gvis.listener.jscode = "
                                     var selected_date = data.getValue(chart.getSelection()[0].row,0);
                                     var parsed_date = selected_date.getFullYear()+'-'+(selected_date.getMonth()+1)+'-'+selected_date.getDate();
                                     Shiny.onInputChange('selected_date',parsed_date)")
                )
        })
        output$date <- renderText({
               input$selected_date
        })
}

ui <- shinyUI(fluidPage( 
        htmlOutput("dates_plot"),
        textOutput("date")
))

shinyApp(ui = ui, server = server)

在此示例中，我将日期解析为 YYYY/M/D，如果您想保留 javascript 长日期格式，您还可以返回 selected_date.toString() 而不是 parsed_date.