亲爱的在我的应用里,用户会给一些东西打分。我想输出5星星的基础上,他们的评级就像那些在IMDB。我的数字中有分数,我希望星星能容纳它们。我根本不懂Java和JavaScript。有没有类似包裹的东西?或者该怎么做?先谢了。
6uxekuva1#
您需要创建两个文件,一个是css,另一个是您的应用...即:
css
--www/-----星星. css您的stars.css文件将包含HTML标记的规则,在标头中使用includeCSS后,HTML标记将根据我们的应用程序进行更新::
stars.css
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>
为此,我们使用UI静态元素和uiOutput的组合,uiOutput与服务器端的renderUI匹配:
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)
我们的应用程序然后使用滑块inpout来创建星星的填充%。
guykilcj2#
我写了一个包来解决类似的问题,这样其他人就不需要使用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)
2条答案
按热度按时间6uxekuva1#
您需要创建两个文件,一个是
css
,另一个是您的应用...即:--www/
-----星星. css
您的
stars.css
文件将包含HTML标记的规则,在标头中使用includeCSS
后,HTML标记将根据我们的应用程序进行更新::在我们的应用程序中,我们希望最终标记显示如下:
为此,我们使用UI静态元素和
uiOutput
的组合,uiOutput
与服务器端的renderUI
匹配:我们的应用程序然后使用滑块inpout来创建星星的填充%。
guykilcj2#
我写了一个包来解决类似的问题,这样其他人就不需要使用CSS和JS。https://github.com/shahronak47/shinyRatings