R: Adjusting Titles in HTML files

问题

I am working with the R programming language. I am trying to save multiple HTML files together like this:

library(plotly)
library(shiny)

#create widget_1

 widget_1 = plot_ly(iris, x = ~Sepal.Length, type = "histogram", nbinsx = 20)
  
    
#create_widget_2
  widget_2 = plot_ly(iris, x = ~Sepal.Width, type = "histogram", nbinsx = 20)

#create_widget_3
 widget_3 = plot_ly(iris, x = ~Petal.Length, type = "histogram", nbinsx = 20)

#create widget_4
 widget_4 = plot_ly(iris, x = ~Petal.Width, type = "histogram", nbinsx = 20)


doc <- htmltools::tagList(
  div(widget_1, style = "float:left;width:50%;"),
  div(widget_2,style = "float:left;width:50%;"),
  div(widget_3, style = "float:left;width:50%;"),
  div(widget_4, style = "float:left;width:50%;")
)

htmltools::save_html(html = doc, file = "C://Users//Me//Desktop//widgets.html")

The above code works. Now, I am trying to titles ("overall title", "title 1", "title 2", "title 3", "title 4") to the final file and extra spaces between all graphs so that none of the graphs do not overlap:

I tried looking at the respective documentation for the taglist() function:

tagList(tags$h1("Title"),
        tags$h2("Header text"),
        tags$p("Text here"))https://www.rdocumentation.org/packages/shiny/versions/0.9.1/topics/tagList))

But I am not sure how I would apply the above code to the html file.

Can someone please tell me how to do this? Thanks

回答1:

library(htmltools)
library(plotly)

#create widget_1
widget_1 = plot_ly(iris, x = ~Sepal.Length, type = "histogram", nbinsx = 20)

#create_widget_2
widget_2 = plot_ly(iris, x = ~Sepal.Width, type = "histogram", nbinsx = 20)

#create_widget_3
widget_3 = plot_ly(iris, x = ~Petal.Length, type = "histogram", nbinsx = 20)

#create widget_4
widget_4 = plot_ly(iris, x = ~Petal.Width, type = "histogram", nbinsx = 20)


doc <- tagList(
  tags$h3(style = "text-align: center;", "Main title"),
  div(
    style = "display: flex; justify-content: space-between;",
    div(
      style = "display: flex; flex-direction: column; align-items: center; width: 45%",
      widget_1,
      tags$p("title 1")
    ),
    div(
      style = "display: flex; flex-direction: column; align-items: center; width: 45%",
      widget_2,
      tags$p("title 2")
    )
  ),
  div(style = "height: 50px;"),
  div(
    style = "display: flex; justify-content: space-between;",
    div(
      style = "display: flex; flex-direction: column; align-items: center; width: 45%",
      widget_3,
      tags$p("title 3")
    ),
    div(
      style = "display: flex; flex-direction: column; align-items: center; width: 45%",
      widget_4,
      tags$p("title 4")
    )
  )
)

browsable(doc)

来源：https://stackoverflow.com/questions/65802298/r-adjusting-titles-in-html-files

标签

html

css

widget

data-visualization