Я хочу показать сообщение типа «график загрузки» во время построения графика.
Как мне этого добиться?
Я хочу показать сообщение типа «график загрузки» во время построения графика.
Как мне этого добиться?
Я нашел способ сделать это, начиная с https://codepen.io/doeg/pen/RWGoLR< /а>.
Например, www/custom.css:
.plotly.html-widget.html-widget-output.shiny-bound-output.js-plotly-plot {
z-index: 22;
position: relative;
}
.plotlybars {
padding: 0 10px;
vertical-align: bottom;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.plotlybars-wrapper {
width: 165px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
.plotlybars-text {
color: #447adb;
font-family: 'Open Sans', verdana, arial, sans-serif;
font-size: 80%;
text-align: center;
margin-top: 5px;
}
.plotlybars-bar {
background-color: #447adb;
height: 100%;
width: 13.3%;
position: absolute;
-webkit-transform: translateZ(0);
transform: translateZ(0);
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
.b1 { left: 0%; top: 88%; animation-name: b1; -webkit-animation-name: b1; }
.b2 { left: 14.3%; top: 76%; animation-name: b2; -webkit-animation-name: b2; }
.b3 { left: 28.6%; top: 16%; animation-name: b3; -webkit-animation-name: b3; }
.b4 { left: 42.9%; top: 40%; animation-name: b4; -webkit-animation-name: b4; }
.b5 { left: 57.2%; top: 26%; animation-name: b5; -webkit-animation-name: b5; }
.b6 { left: 71.5%; top: 67%; animation-name: b6; -webkit-animation-name: b6; }
.b7 { left: 85.8%; top: 89%; animation-name: b7; -webkit-animation-name: b7; }
@keyframes b1 { 0% { top: 88%; } 44% { top: 0%; } 94% { top: 100%; } 100% { top: 88%; } }
@-webkit-keyframes b1 { 0% { top: 88%; } 44% { top: 0%; } 94% { top: 100%; } 100% { top: 88%; } }
@keyframes b2 { 0% { top: 76%; } 38% { top: 0%; } 88% { top: 100%; } 100% { top: 76%; } }
@-webkit-keyframes b2 { 0% { top: 76%; } 38% { top: 0%; } 88% { top: 100%; } 100% { top: 76%; } }
@keyframes b3 { 0% { top: 16%; } 8% { top: 0%; } 58% { top: 100%; } 100% { top: 16%; } }
@-webkit-keyframes b3 { 0% { top: 16%; } 8% { top: 0%; } 58% { top: 100%; } 100% { top: 16%; } }
@keyframes b4 { 0% { top: 40%; } 20% { top: 0%; } 70% { top: 100%; } 100% { top: 40%; } }
@-webkit-keyframes b4 { 0% { top: 40%; } 20% { top: 0%; } 70% { top: 100%; } 100% { top: 40%; } }
@keyframes b5 { 0% { top: 26%; } 13% { top: 0%; } 63% { top: 100%; } 100% { top: 26%; } }
@-webkit-keyframes b5 { 0% { top: 26%; } 13% { top: 0%; } 63% { top: 100%; } 100% { top: 26%; } }
@keyframes b6 { 0% { top: 67%; } 33.5% { top: 0%; } 83% { top: 100%; } 100% { top: 67%; } }
@-webkit-keyframes b6 { 0% { top: 67%; } 33.5% { top: 0%; } 83% { top: 100%; } 100% { top: 67%; } }
@keyframes b7 { 0% { top: 89%; } 44.5% { top: 0%; } 94.5% { top: 100%; } 100% { top: 89%; } }
@-webkit-keyframes b7 { 0% { top: 89%; } 44.5% { top: 0%; } 94.5% { top: 100%; } 100% { top: 89%; } }
а затем в приложении.R:
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
title = "Loading animation test"
, dashboardHeader(title = "Animated Test")
, dashboardSidebar()
,dashboardBody(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
)
, h1("Plotly Bars (Animated CSS)")
, div(id = "plot-container"
, div(class = "plotlybars-wrapper"
, div( class="plotlybars"
, div(class="plotlybars-bar b1")
, div(class="plotlybars-bar b2")
, div(class="plotlybars-bar b3")
, div(class="plotlybars-bar b4")
, div(class="plotlybars-bar b5")
, div(class="plotlybars-bar b6")
, div(class="plotlybars-bar b7")
)
, div(class="plotlybars-text"
, p("loading")
)
)
, plotlyOutput("plot")
)
)
)
server <- function(input, output) {
Sys.sleep(10) # just for demo so you can enjoy the animation
output$plot <- renderPlotly({
plot_ly(
x = 2, y = 3, type = "scatter", mode = "markers"
)
})
}
shinyApp(ui = ui, server = server)
На основе приведенного выше кода я создал модуль Shiny, который автоматически показывает/скрывает анимацию загрузки в зависимости от того, нарисован ли график Shiny (например, если график должен отображаться только после нажатия кнопки действия, вам нужно сделать убедитесь, что анимация загрузки не отображается до тех пор).
Модуль доступен на github по адресу https://github.com/andrewsali/plotlyBars и после установки вы также можно запустить пример прямо оттуда.
Загрузка этой мини-библиотеки позволяет очень легко создавать анимированные блестящие графики, достаточно заменить plotlyOutput/renderPlotly на plotlyBarsUI и вызвать модуль plotlyBars. См. пример приложения на сайте github для получения дополнительной информации о том, как использовать модуль Shiny.
По сути, код показывает анимацию после запуска реактивного создания сюжета и скрывает ее в случае тихого сбоя реактивного (например, req или validate останавливает обработку).