闪亮 HTML UI - 如何为特定的 htmlwidget 输出(如 dygraphs 或其他)选择 类

Shiny with HTML UI - how to choose classes for specific htmlwidget outputs (like dygraphs or others)

我在尝试从 Shiny 应用程序的 UI.R 版用户界面转到 HTML 版时遇到了一些问题。

很明显,代替

这样的函数
textOutput("name")
htmlOutput("name")

我需要用以下 classes

制作一个 div
<div class="shiny-text-output" id="name"></div>
<div class="shiny-html-output" id="name"></div>

我真的不明白 class 我应该在我的 html 中放入什么,例如,当我想替换 htmlwidgets 包中的输出函数时Dygraphs.

dygraphOutput("dygraph")

<div class="dygraphs html-widget html-widget-output" style="width:100%; height:400px;" id="dygraph" width="100%" height="400px"></div>

例如,这不起作用。 (我用浏览器查看了检查元素所赋予的 class。

因此,我的问题是:如果我想引用 htmlwidgets 包中的特定输出函数,特别是 Dygraph,我需要添加什么 class?


我在这里报告我正在尝试处理的代码(是 Dygraph 项目演示页面的第一个示例)

Server.R
library(dygraphs)
library(datasets)

shinyServer(function(input, output) {

  predicted <- reactive({
    hw <- HoltWinters(ldeaths)
    predict(hw, n.ahead = input$months, 
            prediction.interval = TRUE,
            level = as.numeric(input$interval))
  })

  output$dygraph <- renderDygraph({
    dygraph(predicted(), main = "Predicted Deaths/Month") %>%
      dySeries(c("lwr", "fit", "upr"), label = "Deaths") %>%
      dyOptions(drawGrid = input$showgrid)
  })

})

在 Ui.R 中使用标签$div(class= "... ") 来模拟它在我的 index.html[=18 中的样子=]

Ui.R
library(dygraphs)
library(htmlwidgets);
library(htmltools);

shinyUI(fluidPage(

  titlePanel("Predicted Deaths from Lung Disease (UK)"),

  sidebarLayout(
    sidebarPanel(
      numericInput("months", label = "Months to Predict", 
                   value = 72, min = 12, max = 144, step = 12),
      selectInput("interval", label = "Prediction Interval",
                  choices = c("0.80", "0.90", "0.95", "0.99"),
                  selected = "0.95"),
      checkboxInput("showgrid", label = "Show Grid", value = TRUE)
    ),
    mainPanel(
      tags$div(class="dygraphs html-widget html-widget-output shiny-html-output", style="width:100%; height:400px;", id="dygraph", width="100%", height="400px")
      #dygraphOutput("dygraph")
    )
  )
))

这是我在标签中的内容:

<head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <script type="application/shiny-singletons"></script>  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];babel-polyfill[6.7.2];shiny[0.14];selectize[0.11.2];htmlwidgets[0.7];dygraphs[1.1.1];moment[2.8.4];moment-timezone[0.2.5];dygraphs-binding[0.9];bootstrap[3.3.7]</script><script src="shared/json2-min.js"></script>
    <script src="shared/jquery.min.js"></script>
    <script src="shared/babel-polyfill.min.js"></script>
    <link href="shared/shiny.css" rel="stylesheet" />
    <script src="shared/shiny.min.js"></script>
    <link href="shared/selectize/css/selectize.bootstrap3.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="shared/selectize/js/es5-shim.min.js"></script>
    <![endif]-->
    <script src="shared/selectize/js/selectize.min.js"></script>
    <script src="htmlwidgets-0.7/htmlwidgets.js"></script>
    <link href="dygraphs-1.1.1/dygraph.css" rel="stylesheet" />
    <script src="dygraphs-1.1.1/dygraph-combined.js"></script>
    <script src="moment-2.8.4/moment.js"></script>
    <script src="moment-timezone-0.2.5/moment-timezone-with-data.js"></script>
    <script src="dygraphs-binding-0.9/dygraphs.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="shared/bootstrap/js/bootstrap.min.js"></script>
    <script src="shared/bootstrap/shim/html5shiv.min.js"></script>
    <script src="shared/bootstrap/shim/respond.min.js"></script>  <title>Predicted Deaths from Lung Disease (UK)</title>

    </head>