在 R Shiny 中的 fluidRow() 中绘制 3 个小方块，就像图例一样答案

【问题标题】：Draw 3 small squares like a legend in fluidRow() in RShiny在 R Shiny 中的 fluidRow() 中绘制 3 个小方块，就像图例一样
【发布时间】：2020-09-09 12:50:32
【问题描述】：

我正在使用plot_ly() 绘制堆积条形图，我需要在fluidRow() 中的绘图下方默认显示图例。

我知道我们可以在 plotly 中使用layout 绘制图例。但我需要用 3 个小框在单独的行中显示图例。

谁能提供在一个fluidRow中创建3个小盒子的解决方案？

PS：我需要将这些显示在一个fluidRow()

提前致谢！！

【问题讨论】：

请提供您迄今为止尝试过的 MRE，谢谢！

标签： r shiny legend

【解决方案1】：

我为你写了一个非常简单的函数colorBox。 color 是图例颜色，text 是图例文本。

library(shiny)

colorBox <- function(color, text=""){
    div(
        tags$span(text, style = "padding-left: 30px;"),
        div(
            style = paste0("background-color:", 
                           color, "; ",
                           "display: inline-block;
                        position: absolute;
                        height:13px;
                        width: 13px;
                        left: 5px;
                        top: 3px;")),
        style = "position: relative;"
    )
}

ui <- fluidPage(
    h1("Legend"),
    fluidRow(
        colorBox("red", "red"),
        colorBox("yellow", "yellow"),
        colorBox("green", "green"),
    ),
    fluidRow(
        style = "width: 300px;",
        column(4, colorBox("red", "red")),
        column(4, colorBox("yellow", "yellow")),
        column(4, colorBox("green", "green")),
    )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

两种布局：

第一个是垂直的；
第二个在宽屏上是水平的，在窄屏上是垂直的：当您将窗口宽度缩小到窄视图时，图例将变为垂直。尝试使用您的浏览器宽度，您会看到差异。

【讨论】：