闪亮的，timevis 和 html 模板答案

【问题标题】：shiny, timevis and html templates闪亮的，timevis 和 html 模板
【发布时间】：2017-06-10 08:40:58
【问题描述】：

我在闪亮的 html 块中显示 timevis 时遇到问题。

以下代码是有效的基本示例：

library(shiny)
library(timevis)

data <- data.frame(
  id      = 1:4,
  content = c("Item one", "Item two",
              "Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11",
              "2016-01-20", "2016-02-14 15:00:00"),
  end     = c(NA, NA, "2016-02-04", NA)
)

ui <- bootstrapPage(
  timevisOutput("timeline")
)

server <- function(input, output, session) {
  output$timeline <- renderTimevis({
    timevis(data)
  })
}

shinyApp(ui = ui, server = server)

但是，如果我使用 html 模板并尝试显示内容，则不会出现。这是示例代码

   library(shiny)
    library(timevis)

ui <- bootstrapPage(
            tags$div(id="page-content-wrapper", 
                    timevisOutput("timeline")
                    )
)

server <- function(input, output, session) {
      output$timeline <- renderTimevis({
      timevis(data)
    })



  }

  shinyApp(ui = ui, server = server)

以及包含引用的 html

<div id=" timeline " class="shiny-plot-output" style="width: 100%;height:200px;"></div>

知道为什么会这样吗？我错过了什么吗？（即在应用程序的标头或 html 文件中适当包含 js 库？）如果有人有 htmlwidgets 的工作示例，那也可能是一种替代方法，但我目前无法得到任何工作

非常欢迎提出建议！谢谢

【问题讨论】：

无法用shiny_1.0.3、timevis_0.4、R_3.3.2、win7重现
哦，伙计，我给了赏金，因为 OP 给我发了电子邮件，我说我太忙了，没时间检查。所以我想通过提供赏金来提供帮助......也许我应该花 5 分钟来尝试重现 :)
@DeanAttali 这是新投资者经常犯的错误：D

标签： html r shiny

【解决方案1】：

我认为您的代码没有任何问题。我能想到的唯一原因可能是过时的软件包：以下是为我的会话加载的包：

loaded via a namespace (and not attached):

 [1] Rcpp_0.12.11    digest_0.6.12   rprojroot_1.2   mime_0.5        R6_2.2.1        backports_1.1.0 xtable_1.8-2   
 [8] jsonlite_1.5    magrittr_1.5    evaluate_0.10   stringi_1.1.5   rmarkdown_1.5   tools_3.4.0     stringr_1.2.0  
[15] htmlwidgets_0.8 httpuv_1.3.3    yaml_2.1.14     rsconnect_0.8   compiler_3.4.0  htmltools_0.3.6 knitr_1.16

闪亮应用生成的HTML代码是：

<!DOCTYPE html>
<html>
<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];shiny[1.0.3];htmlwidgets[0.8];vis[4.16.1];timeline[0.4];timevis-binding[0.4];bootstrap[3.3.7]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<script src="htmlwidgets-0.8/htmlwidgets.js"></script>
<link href="vis-4.16.1/vis.min.css" rel="stylesheet" />
<script src="vis-4.16.1/vis.min.js"></script>
<link href="timeline-0.4/timevis.css" rel="stylesheet" />
<script src="timevis-binding-0.4/timevis.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>

</head>

<body>
  <div id="page-content-wrapper">
    <div id="timeline" class="timevis html-widget html-widget-output" style="width:100%; height:auto; ">
      <div class="btn-group zoom-menu">
        <button type="button" class="btn btn-default btn-lg zoom-in" title="Zoom in">+</button>
        <button type="button" class="btn btn-default btn-lg zoom-out" title="Zoom out">-</button>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

@lorenzov 您能否确认更新您的软件包后，您原来的问题消失了？如果你能确认我会奖励赏金
恐怕不是，因为每个人似乎都专注于给出的例子（这确实有效，但显然我在解释事情方面做得不好，所以我会添加更多信息跨度>
赏金即将到期，所以我必须奖励它，因为这个答案是正确的。如果您需要更多帮助，您可以编写一个全新的问题，只要确保给出一个可重复的示例

【解决方案2】：

我要感谢我的同事@ZachA，因为我的问题并不完全准确，但是那里的文档很少，所以它可能对其他人有用。

为了向闪亮的应用程序添加自定义 html，R 网站和文章（即http://shiny.rstudio.com/articles/templates.html 或 http://shiny.rstudio.com/articles/html-ui.html）中记录了多种方法。

包含文件有两种方式：

includehtml('yourfile') 和 htmlTemplate('yourfile')

这就是问题所在，因为 html 的呈现方式不同，并且源 html 文件中包含或排除标头导致了我的问题，尤其是当您开始混合两种方式时。

就我而言，使用 htmlTemplate 似乎是根本原因；将对文件的调用更改为 includehtml 解决了它。

这里有一点代码来解释

  ui <- bootstrapPage(
tags$head(
  tags$script(src='js/custom.js')
  ,tags$link(rel = "stylesheet", type = "text/css", href ='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css')
  ,tags$script(src='https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js')
  ,tags$script(src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js')
  ,tags$link(rel = "stylesheet", type = "text/css", href ='css/style.css')
  ,tags$link(rel = "stylesheet", type = "text/css", href ='css/myvis.css')

  ),
myuser = verbatimTextOutput("s_user"),
tags$div(id="wrapper",
    tags$div(class="overlay"),
    tags$nav(class="navbar navbar-inverse navbar-fixed-top", id="sidebar-wrapper", role="navigation", includeHTML("./sidebar.html")),
    tags$div(id="page-content-wrapper", htmlTemplate("./main.html")),

    tags$div(class="container",
        tags$div(class="row",
                 tabsetPanel(type="pills",
                     tabPanel("Overview", 
                              htmlTemplate("html_template/overview.html")
                              ),
                     tabPanel("Streams", 
                              includeHTML("html_template/streams.html")
                     ),

                     tabPanel("Budget", 
                              includeHTML("html_template/budget.html")
                     ),
                     tabPanel("Status", 
                              htmlTemplate("html_template/status.html")
                     ),


                     tabPanel("Milestones", 
                              includeHTML("html_template/milestones.html")
                     ),
                     tabPanel("Risks", 
                              htmlTemplate("html_template/risks.html")
                     )
                   )

             )

    )
  )
)

如您所见，使用 bootstrapPage 布局并添加各种库帮助我解决了它（代码中的 stream.html 文件）。最后，为了获得最大的灵活性，我们在模板中编写了 javascript，并使用 shinyjs 填充 json 对象以绘制 viz。

【讨论】：