Question

我在html块中以闪亮的方式显示时间时遇到问题。

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

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 lib？）如果有人有htmlwidgets的工作示例，那也可能是另一种选择，但我现在无法正常工作

建议非常欢迎！感谢

Answer 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>

Answer 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。

闪亮的，timevis和html模板

2 个答案: