r - 日期的 slider 输入

Question

我正在使用 animationOptions 制作动画在 sliderInput() .我想在 slider 中使用日期/日期范围，但是 sliderInput()不接受日期。有一个 post在 Shiny 组中。截至 2013 年 3 月，还没有解决方案。所以我四处搜索并了解到可以使用 JavaScript 实现这一点。这里是 post .不幸的是，我不能用 JS 编写。所以，我搜索了更多并想出了this link并编写了以下代码。这可行，但 slider 上的数字令人困惑。这是唯一可以在sliderInput() 中移动和使用日期的方法吗？ ?非常感谢您抽出宝贵时间。

服务器.R

library(shiny)

shinyServer(function(input, output, session) {


observe({
    updateDateInput(session, "ana", value = as.Date("2014-07-01") + input$foo)
})

output$preImage <- renderImage({


filename <- normalizePath(file.path('./www',
                          paste(input$ana, '.png', sep='')))

list(src = filename,
     alt = paste("There is no image for ", input$ana, ".", sep = ""))

}, deleteFile = FALSE)

})

ui.R

shinyUI(pageWithSidebar(

    headerPanel("renderImage example"),

sidebarPanel(

    sliderInput("foo", "Animation duration", min = -30,
                max = 30, value = 0, step = 1,
                animate = animationOptions(loop = TRUE, interval = 1000)),

    dateInput("ana", "Choose a date:", value = as.Date("2014-07-01"))

    ),

mainPanel(

# Use imageOutput to place the image on the page
imageOutput("preImage")

    )
))

Answer 1

sliderInput控件提供了一些有限的格式选项。您可以添加 format参数到您的sliderInput更改 slider 的显示文本。

理想情况下，您需要 sliderInput提供自定义映射函数，将当前值映射到确切日期。但由于这不是选项，唯一的改进空间是使用 format 稍微更改文本。范围。

接受 format can be found in this document .

根据上面的文档，也许你可以改变你的sliderInput进入:

sliderInput("foo", "Animation duration", min = -30,
                max = 30, value = 0, step = 1,
                format="## Days",
                animate = animationOptions(loop = TRUE, interval = 1000)),

这将显示为 +10 Days ，最初是“+10”。

它可能不是您真正想要的，但这是您无需编写 Javascript 就可以做到的。

编辑:使用 Javascript 显示自定义 slider 值

假设您真的想更改 slider 的当前值标签以指示一些复杂的值(日期、转换后的值等)，您可以编写一些小的 Javascript 片段来做到这一点。
jslider 提供的一个示例控制(这是 Shiny 用于您的 sliderInput )表明通过调用带有 calculate 的 slider 的构造函数函数，您可以手动将映射从当前值(数字)更改为自定义字符串(在本例中为日期)。

不用太冗长，我们就说 slider 的 Javascript 对象被称为 slider。 .您可以随时调用:

$(select).slider()

在哪里 select是一个 jQuery 选择器。同样，在这种情况下它是 #foo因为 slider 有一个 ID foo设置在 ui.R .
启动时， slider.settings.calculate例子中出现的函数必然是 slider.nice功能。因此，我们可以简单地覆盖 nice功能来实现我们的目标。

以下是修改后的 ui.R用一段 Javascript 来做 nice功能覆盖。

用户界面

shinyUI(pageWithSidebar(
  headerPanel("renderImage example"),
  sidebarPanel(
    sliderInput("foo", "Animation duration", min = -30,
                max = 30, value = 0, step = 1,
                animate = animationOptions(loop = TRUE, interval = 1000)),
    dateInput("ana", "Choose a date:", value = as.Date("2014-07-01"))
  ),

  mainPanel(
    singleton(tags$head(HTML(
      '
  <script type="text/javascript">
    $(document).ready(function() {
      var slider = $("#foo").slider();
      // override the default "nice" function.
      slider.nice = function(value) {
        var ref_date = new Date("2014-07-01");
        // each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds
        var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000);
        return [slider_date.getUTCFullYear(), 
                slider_date.getUTCMonth() + 1, 
                slider_date.getUTCDate()].join("-");
      }
    })
  </script>
'))),
    # Use imageOutput to place the image on the page
    imageOutput("preImage")
  )
))

我们可能想要调整的另一个细节是 slider 两端的标签。为此，我们可以:

替换整个 slider.domNode调用 slider.generateScales() ;

直接修改两个<span>与类(class) jslider-label .

例如，如果我们采用方法 2，我们可以修改 HTML() ui.R 的一部分作为:

    singleton(tags$head(HTML(
      '
  <script type="text/javascript">
    $(document).ready(function() {
      var slider = $("#foo").slider();
      // override the default "nice" function.
      var labels = slider.domNode.find(".jslider-label span");
      labels.eq(0).text("2014-06-01");
      labels.eq(1).text("2014-07-31");
      slider.nice = function(value) {
        var ref_date = new Date("2014-07-01");
        // each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds
        var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000);
        return [slider_date.getUTCFullYear(), 
                slider_date.getUTCMonth() + 1, 
                slider_date.getUTCDate()].join("-");
      }
    })
  </script>
'))),

标签将按预期显示日期。

这当然是一些快速的黑客行为，如果对 slider 进行了一些其他自定义，则可能无法正常工作。

我认为 Shiny 团队应该考虑添加一个 calculate sliderInput 中的选项直接映射到 slider.settings.calculate ，只是为了让这样的事情更容易。