模块化的闪亮应用程序 ui 将所有绘图相互叠加答案

【问题标题】：modualized shiny app ui renders all plots on top of one another模块化的闪亮应用程序 ui 将所有绘图相互叠加
【发布时间】：2021-11-02 23:21:46
【问题描述】：

我有一个闪亮的应用程序，完全构建，我在一个脚本中构建了所有内容。一切正常，用户界面等，我想模块化应用程序以使代码更具可读性。现在所有的情节都呈现在彼此之上，我不知道为什么。我尝试过使用 pageContainer、sidbarLayout、sidePanel 和 mainPanel、fluidPage、fixedPage 等，但都没有奏效。我也在我的主 ui 中使用 pagePiling，所以不确定这是否有时与它有关？任何帮助将非常感激！请在此处找到完整代码：https://github.com/eoefelein/COVID_Business_Recovery_and_Social_Capital/tree/master/socialCapitalEmployment

这是我的 ui 代码的样子：

ui <- tagList(
  pagePiling(
    center = TRUE,
    sections.color = c("#3333FF", "#E6E6E6"),
    menu = c(
      "Home" = "home",
      "Map" = "map",
      "Series" = "ts",
      "PCA" = "pca",
      "Predict" = "predict",
      "About" = "about"
    ),
    pageSectionImage(
      center = TRUE,
      img = "",
      menu = "home",
      h1(("title"), class = "header shadow-dark"),
      h3(
        class = "light footer",
        "by",
        tags$a("news-r", href = "https://news-r.org", class = "link")
      )
    ),
    pageSection(center = TRUE,
                menu = "map",
                mod_map_ui("map"),
                br()),
    pageSection(center = TRUE,
                menu = "ts",
                mod_ts_ui("ts"),
                br()),
    pageSection(center = TRUE,
                menu = "pca",
                mod_pca_ui("pca"),
                br()),
    pageSection(
      center = TRUE,
      menu = "predict",
      mod_predict_ui("predict"),
    ),
    pageSection(
      center = TRUE,
      menu = "about",
      h1("About", class = "header shadow-dark"),
      h2(
        class = "shadow-light",
        tags$a(
          "The code",
          href = "https://github.com/news-r/fopi.app",
          target = "_blank",
          class = "link"
        ),
        "|",
        tags$a(
          "The API",
          href = "https://github.com/news-r/fopi",
          target = "_blank",
          class = "link"
        )
      ),
      h3(
        class = "light footer",
        "by",
        tags$a("news-r", href = "https://news-r.org", class = "link")
      )
    )
  )
)

这是我的第一个模块的用户界面：

mod_map_ui <- function(id) {
  ns <- NS(id)
  tagList(
    fluidPage(
    h1("Employment & Social Capital across the U.S by County"),
    center = TRUE,
    column(9, leafletOutput(ns("map"), height = "100vh")),
    column(
      3,
      shinyWidgets::radioGroupButtons(
        inputId = ns("idx"),
        label = "Metric",
        choices = c(unique(social_indices$name)),
        checkIcon = list(yes = icon("ok",
                                    lib = "glyphicon"))
      )
    )
  ))
}

这是我的第二个模块的用户界面：

mod_ts_ui <- function(id) {
  ns <- NS(id)
  tagList(
    fixedPage(
      h2("Employment by County", align = "center"),
      fixedRow(
        column(
          4,
          selectizeInput(
            inputId = ns("dataset"),
            label = "Choose a county:",
            choices = c(unique(employment["countyfips"])),
            multiple = TRUE,
            selected = "Travis County, Texas",
            options = list(create = TRUE)
            )
          ),
        column(
          8, (echarts4r::echarts4rOutput(ns("ts_plot")))
          )
        )
      )
    )
}

【问题讨论】：

或许您应该发布完整的MRE 以便有人可以帮助您。
@YBS 这里是上传到 github 的完整代码的链接。谢谢你的帮助！ github.com/eoefelein/COVID_Business_Recovery_and_Social_Capital/…
很确定这个问题来自pagePiling，而不是通常的fluidPage等等。
对于绘图，您可以使用pageSectionPlot()，而不是pageSection()。

标签： r user-interface shiny module

【解决方案1】：

好的，所以我修复了它，我认为修复的是为每个部分指定颜色：

pagePiling(
    center = TRUE,
    sections.color = c("#7b959c", "#445768","#b9bdc9","#f6e7ea","#e2e2e2","#1e4356"),
    menu = c(
      "Home" = "home",
      "Map" = "map",
      "Series" = "ts",
      "PCA" = "pca",
      "Predict" = "predict",
      "About" = "about"
    ),

很奇怪，但是在我这样做之后，每个情节都按其应有的方式呈现在它自己的部分中。希望这对将来的人有所帮助！

【讨论】：