使用CSS美化shiny app效果

shiny 是R语言的web框架，当我们要开发一个shiny app时，一般包含两个文件，ui.R和server.R。

本文介绍一个使用CSS对shiny app效果进行美化的简单例子。该例子是在shiny examples中的01_hello基础上修改而成。

先看ui.R程序

library(shiny)
# Define UI for application that draws a histogram
fluidPage(

 #使用includeCSS函数加载CSS
  includeCSS("style.css"),
  # Application title
  headerPanel("Hello World"),

  # Sidebar with a slider input for the number of bins
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),

    # Show a plot of the generated distribution
    mainPanel(
      plotOutput("distPlot")
    )
  )
)

然后是server.R程序

library(shiny)


# Define server logic required to draw a histogram
function(input, output) {


  # Expression that generates a histogram. The expression is
  # wrapped in a call to renderPlot to indicate that:
  #
  #  1) It is "reactive" and therefore should be automatically
  #     re-executed when inputs change
  #  2) Its output type is a plot
  


  output$distPlot <- renderPlot({
    x    <- faithful[, 2]  # Old Faithful Geyser data
    bins <- seq(min(x), max(x), length.out = input$bins + 1)


    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })


}

我们设置的CSS其实也很简单，就是把标题的字体颜色以及北京颜色设置了一下。style.css具体代码如下：

@import url("//fonts.googleapis.com/css?family=Lobster|Cabin:400,700");

h1 {
  font-family: 'Lobster', cursive;
  font-weight: 500;
  line-height: 1.1;
  color: #ad1d28;
}


body {
  background-color: #4F94CD;
}

效果图如下图所示：

如有任何问题请跟我联系，点击链接加入群【R语言＆大数据分析】：https://jq.qq.com/?_wv=1027&k=4CSCAUx。或者加群号456726635。