闪亮 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>
我在尝试从 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>