Hiển thị thông báo "tải đồ thị" theo lô

Question

Tôi muốn hiển thị thông báo như "tải đồ thị" trong khi đang vẽ đồ thị.

Làm cách nào để đạt được điều này?

mong đợi đầu ra:

Answer 1

tôi đã tìm ra một cách để làm điều đó bắt đầu với https://codepen.io/doeg/pen/RWGoLR.

1. Sao chép nội dung của CSS vào tệp css bên ngoài mà bạn đặt trong thư mục con có tên www.
2. Tham chiếu tệp đó trong tập lệnh Sáng bóng của bạn.
3. Chèn các câu lệnh div thích hợp trong tập lệnh của bạn để bọc mã bạn muốn tải.
4. Sửa đổi CSS của bạn sao cho chỉ mục z của hoạt ảnh thấp hơn chỉ mục z của cốt truyện của bạn để khi cốt truyện của bạn xuất hiện, nó được hiển thị trên đầu hoạt ảnh của bạn.

Ví dụ, 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%; } } 

và sau đó trong app.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) 

Answer 2

Dựa trên mã ở trên, tôi đã tạo ra một mô-đun tự động Shiny hiển thị/ẩn hoạt ảnh tải dựa trên liệu ô Lô sáng có được vẽ hay không (ví dụ: nếu cốt truyện chỉ được hiển thị sau khi nhấp vào nút tác vụ, bạn cần đảm bảo rằng hoạt ảnh tải không hiển thị cho đến lúc đó).

Mô-đun có sẵn trên github tại https://github.com/andrewsali/plotlyBars và sau khi cài đặt, bạn cũng có thể chạy ví dụ trực tiếp từ đó.

Tải thư viện nhỏ này giúp dễ dàng tạo các ô sáng động, chỉ cần thay thế plotlyOutput/renderPlotly bằng plotlyBarsUI và gọi hàm plotlyBars. Xem ứng dụng ví dụ trên trang web github để biết thêm thông tin về cách sử dụng mô-đun Sáng bóng.

Hiệu quả những gì mã thực hiện là nó hiển thị hình ảnh động khi việc tạo phản ứng được bắt đầu và ẩn nó trong trường hợp không hoạt động âm thầm (ví dụ: req hoặc validate ngừng xử lý).