闪亮,timevis和html模板 [英] shiny, timevis and html templates

查看:119
本文介绍了闪亮,timevis和html模板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



以下代码是适用的基本示例:

  library(shiny)
library(timevis)

data < - data.frame(
id = 1:4,
content = c(Item one,Item two,
Ranged item,Item four),
start = c( 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)



服务器< - 函数(输入,输出,会话){
输出$时间线< - renderTimevis({
timevis(data)
})



}

shinyApp(ui = ui,server = server)

和包含引用的html

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

任何想法为什么发生这种情况?我错过了什么? (也就是说,在应用程序的头文件或html文件中适当地包含js库)?如果任何人都有一个使用htmlwidgets的工作示例,这也可能是一种替代方案,但目前我无法获得任何工作。



建议非常欢迎!谢谢

解决方案

我不得不感谢我的同事@ZachA,因为我的问题并不完全准确,但很少有文档记录,所以它可能对其他人有用。

为了将自定义html添加到闪亮的应用中,R站点和文章中记录了几种方法(即 http://shiny.rstudio.com/articles/templates.html http://shiny.rstudio.com/articles/html-ui.html )包括文件:

includehtml('yourfile')和htmlTemplate('yourfile') / p>

这是问题出在HTML呈现方式不同的地方,并且在源html文件中包含或排除标题导致了我的问题,特别是如果您开始混合两种方式。

i我的情况使用htmlTemplate似乎是根本原因;改变调用文件到includehtml解决它。



这里有一段代码解释



<$ p $ 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 $脚本(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(i d =page-content-wrapper,htmlTemplate(./main.html)),

标签$ 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(状态,
htmlTemplate(html_template / status.html)
),


tabPanel(里程碑,
includeHTML(html_template / milestones.html)
),
tabPanel(风险,
htmlTemplate(html_template / risks.html)












$ b

你可以看到使用bootstrapPage布局并添加了各种库帮我解决了它(代码中的stream.html文件)。最后,为了获得最大的灵活性,我们在模板中编写了javascript代码,并使用shinyjs来填充json对象来绘制该viz。

i'm having a problem displaying a timevis in an html block in shiny.

the following code is the base example which works:

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)

however if i use an html template and try to display the content this does not appear. here is sample code

   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)

and the html containing the reference

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

any idea why this happens? am i missing something? (i.e. appropriate inclusion of js libs in either the app's header or html file?) if anyone has a working example with htmlwidgets, that could be an alternative too, but i cannot get anything to work at the moment

suggestions very welcome! thanks

解决方案

I have to thank my colleague @ZachA as my question was not entirely accurate, but there is very little documented out there, so it may be useful to others.

in order to add custom html to shiny apps there are several ways as documented on the R sites and articles (i.e. http://shiny.rstudio.com/articles/templates.html or http://shiny.rstudio.com/articles/html-ui.html).

there are tow ways to include files:

includehtml('yourfile') and htmlTemplate('yourfile')

this is where the problem is as the way the html is rendered is different and the inclusion or exclusion of headers in the source html files caused my problem, especially if you start mixing the two ways.

in my case using htmlTemplate seem to be the root cause; changing the call to file to includehtml solved it.

here is a bit of the code to explain

  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")
                     )
                   )

             )

    )
  )
)

as you can see using the bootstrapPage layout and adding the various libraries helped me resolve it (the stream.html file in the code). at the end, for maximum flexibility we coded the javascript inside the template and use shinyjs to populate the json object to draw the viz.

这篇关于闪亮,timevis和html模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆