Есть ли способ * вывести * звездный рейтинг в R Shiny? - PullRequest
Новая
       12

Есть ли способ * вывести * звездный рейтинг в R Shiny?

0 голосов
/ 02 октября 2019

Уважаемые,

В моем приложении пользователи оценивают некоторые вещи.

Я хочу выводить 5-звездочные рейтинги, основанные на их рейтингах, точно так же, как в IMDB.

В моих числах есть дроби, и я хочу, чтобы звезды соответствовали им.

Я вообще не знаю ни Java, ни JavaScript.

Есть ли что-то вроде пакета для этого? или что делать?

Заранее спасибо.

1 Ответ

3 голосов
/ 02 октября 2019

Вам нужно будет создать два файла: css, а затем ваше приложение ... т.е.:

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

Ваш файл stars.css будет содержать правила для разметки HTML, которые будут обновляться на основе нашего приложения после использования includeCSS в заголовке:: 

.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>

Итак, для этого мы используем комбинацию статических элементов пользовательского интерфейса, а затем 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)

Наше приложение затем использует входной ползунок для создания% заполнения звездочек.

enter image description here

...