r - box() 的闪亮仪表板列布局
问题描述
我有一个看起来像这样的闪亮仪表板:
# Packages
library(shinydashboard)
library(tidyverse)
library(readxl)
library(scales)
theme_set(theme_light())
header <- dashboardHeader(
title = "Test App",
titleWidth = 215
)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("Test Tab", tabName = "test_tab",
icon = icon("paper-plane"), startExpanded = TRUE)
)
)
body <- dashboardBody(
tabItems(
tabItem(tabName = "test_tab",
fluidRow(
column(width = 4,
h2("Column X"),
valueBoxOutput("first_value", width = NULL),
box(flexdashboard::gaugeOutput("second_value", width = "90%", height = "100px"),
title = "Second Value", status = "primary", solidHeader = TRUE,
collapsible = FALSE, width = NULL
)
),
column(width = 8,
h2("Column Y"),
box(
title = "#3", status = "primary", solidHeader = TRUE,
collapsible = FALSE, width = 4
),
box(
title = "#4", status = "primary", solidHeader = TRUE,
collapsible = FALSE, width = 4
)
)
),
fluidRow(
h2("Row A"),
column(width = 12,
box(title = "Third Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Fourth Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Fifth Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Sixth Value", status = "primary", solidHeader = TRUE,
width = 2.4),
box("Seventh Value", status = "primary", solidHeader = TRUE,
width = 2.4)
)
)
)
)
)
# Put them together into a dashboardPage
ui <- dashboardPage(skin = "blue", header = header,
sidebar = sidebar,
body = body)
server <- function(input, output) {
output$first_value <- renderValueBox({
valueBox(
comma_format()(100000),
subtitle = "First Value",
icon = icon("list"), color = "purple"
)
})
output$second_value = flexdashboard::renderGauge({
flexdashboard::gauge(0.12 * 100,
symbol = '%',
min = 0,
max = 100)
})
}
shinyApp(ui, server)
我试图让 RowA 下面的 box()es 以五列格式排列,如下所示:
Third Value | Fourth Value | Fifth Value | Sixth Value
我不确定我会怎么做。我试图将 5 个盒子放在一个应该可以工作的 fluidRow() 内的 column() 内,但不幸的是,这些盒子继续水平显示......
无论如何以列格式显示框?如果没有,你能指导我使用其他类似于我的功能吗?
解决方案
您已将这五个框的每一个的列宽指定为 2.4(我猜是 12/5)。
列宽应该是整数。如果你用 2 代替 2.4 就可以了。
请注意,框 5 右侧将有一个空列,对应于剩余的 2 (12 - 2*5) 个位置。
这是基于引导列布局。有关更多信息,请参阅本教程。
推荐阅读
- oracle - 将 SQL 类型转换为 PLSQL 集合/将一种集合类型转换为另一种
- css - 在 Spring Boot 中引用 CSS
- ajax - 在 ajax 请求中将 cookie 传输到同一域上的站点
- c++ - 与在线编译器相比,代码块编译器给出错误的输出
- java - 我无法在 Android 应用程序的 TextView 中设置字符串(使用 Java)
- python - 熊猫重新采样到某个日期 - 填补缺失的时间序列
- function - PowerShell中参数和函数语法之间的区别
- sql - 在 2 个级别按 Group by 获取记录数
- node.js - 如何将 React 表单数据发送到后端快递服务器
- owl - 我不能将 sh:lessThan 与 xsd:positiveInteger 一起使用