在R Shiny中是否有一种方法可以输出星级评分？

Question

亲爱的们，

在我的应用中，用户对一些东西进行评分。

我想根据他们的评分输出类似于IMDB中的5星评级。

我的数字中有小数，我希望星星能够适应它们。

我完全不懂Java或JavaScript。

是否有像这样的包？或者该怎么办？

提前感谢。

- Am95

---

Am95，这个问题太宽泛了。StackOverflow是一个关于具体编程问题的网站。大多数好的问题都包含代码，我猜测这些问题之所以“好”，是因为：（1）提问者展示了努力；（2）它是一个起点，可以提出建议（也许还有无关的错误）；（3）帮助已经存在的代码要容易得多；而且可能非常重要的是（4）这不是一个免费的代码服务。请在这里阅读一些关于良好问题的信息：Refs: https://dev59.com/eG025IYBdhLWcg3whGSx, https://stackoverflow.com/help/mcve, and https://stackoverflow.com/tags/r/info. - r2evans

Answer 1

您需要创建两个文件，一个是 css，另外一个是您的应用程序（app.R）...比如：

• app.R
  -- www/
  ------ stars.css

在使用头部的 includeCSS 之后，您的 stars.css 文件将会更新 HTML 标记的规则，以便与我们的应用程序保持同步。

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 44pt; /* Make this bigger or smaller to control size of stars*/
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}

/* Webkit-text-stroke is not supported on firefox or IE */
/* Firefox */
@-moz-document url-prefix() {
  .full-stars{
    color: #ECBE24;
  }
}
/* IE */
<!--[if IE]>
  .full-stars{
    color: #ECBE24;
  }
<![endif]-->

在我们的应用程序中，我们希望最终的标记呈现如下：

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars" style="width:70%"></div>
</div>

为了实现这一点，我们使用UI静态元素和uiOutput的组合，在服务器端上与renderUI匹配：

library(shiny)


ui <- fluidPage(
    includeCSS("www/stars.css"),
    sliderInput(inputId = "n_stars", label = "Ratings", min = 0,  max = 5, value = 3, step = .15),
    tags$div(class = "ratings",
             tags$div(class = "empty-stars",
                      uiOutput("stars_ui")
             )
    )
)

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

    output$stars_ui <- renderUI({
        # to calculate our input %
        n_fill <- (input$n_stars / 5) * 100
        # element will look like this: <div class="full-stars" style="width:n%"></div>
        style_value <- sprintf("width:%s%%", n_fill)
        tags$div(class = "full-stars", style = style_value)
    })

}

# Run the application
shinyApp(ui = ui, server = server)

我们的应用程序使用滑动输入来创建星星的填充百分比。

- Carl Boneri

Answer 2

我编写了一个包，用于解决类似问题，这样其他人就不需要使用CSS和JS。https://github.com/shahronak47/shinyRatings

#Installation of the package from Github
#devtools::install_github('shahronak47/shinyRatings')

library(shiny)
library(shinyRatings)

ui <- fluidPage(
  shinyRatings('star'), 
  textOutput('text')
)

server <- function(input, output, session) {
  output$text <- renderText({paste("No. of stars : ", input$star)})
}

shinyApp(ui, server)

- Ronak Shah