R：调整 HTML 个文件中的标题

Question

我正在使用 R 编程语言。我正在尝试像这样一起保存多个 HTML 文件：

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

以上代码有效。现在，我正在尝试将标题（“总体标题”、“标题 1”、“标题 2”、“标题 3”、“标题 4”）添加到最终文件中，并在所有图表之间添加额外的空格，以便 none图表不重叠：

我尝试查看 taglist() 函数的相应文档：

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

但我不确定如何将上述代码应用到 html 文件。

谁能告诉我该怎么做？谢谢

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

R：调整 HTML 个文件中的标题

R: Adjusting Titles in HTML files

html

css

r

data-visualization

widget