Question

我正在使用Shiny仪表板，并使用valueBoxes显示当前的KPI。不过，我要注意的是，取决于某些文本的长度，它会拉长框以适合文本，然后使外观变糟。

无论屏幕大小如何，如何使文本始终仅停留在1行上（即，将字体更改为框的宽度）？

此外，如果您有任何HTML或CSS指针来使信息的布局更好，请告诉我。

我必须显示：

值
值表示的描述
对未来的估计值

在我的实际仪表板中：

我更改了框背景颜色
使边缘变圆
让值字体颜色根据阈值进行更改

代码：

ui <- dashboardPage(
  dashboardHeader(title = "Dynamic boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      valueBoxOutput("vbox", width = 2),
      valueBoxOutput("vbox2", width = 2),
      valueBoxOutput("vbox3", width = 2),
      valueBoxOutput("vbox4", width = 2),
      valueBoxOutput("vbox5", width = 2),
      valueBoxOutput("vbox6", width = 2)
    )
  )
)

server <- function(input, output) {
  output$vbox <- renderValueBox({
    valueBox(
      "55%",
      HTML(paste("test_value that is super long like this",br(),"Estimated: 98%")),
      icon = icon("credit-card")
    )
  })
  output$vbox2 <- renderValueBox({
    valueBox(
      "70%",
      HTML(paste("this one is just as long, maybe even longer",br(),"Estimated: 100%")),
      icon = icon("credit-card")
    )
  })
  output$vbox3 <- renderValueBox({
    valueBox(
      "80%",
      HTML(paste("this one is short",br(),"Estimated: 50%")),
      icon = icon("credit-card")
    )
  })
  output$vbox4 <- renderValueBox({
    valueBox(
      "100%",
      HTML(paste("medium length like here",br(),"Estimated: 95%")),
      icon = icon("credit-card")
    )
  })
  output$vbox5 <- renderValueBox({
    valueBox(
      "90%",
      HTML(paste("test_value that is super long like this",br(),"Estimated: 80%")),
      icon = icon("credit-card")
    )
  })
  output$vbox6 <- renderValueBox({
    valueBox(
      "40%",
      HTML(paste("test_value that is super long like this",br(),"Estimated: 70%")),
      icon = icon("credit-card")
    )
  })
}

shinyApp(ui, server)
}

valueBox闪亮仪表板：自定义格式

0 个答案: