在图中显示“加载图形”消息

时间:2016-03-21 11:13:06

标签: r shiny plotly shinydashboard

我希望在绘图正在进行时显示“加载图表”等消息。

我如何实现这一目标?

预期产量:
enter image description here

enter image description here

2 个答案:

答案 0 :(得分:2)

我想出了一种从https://codepen.io/doeg/pen/RWGoLR开始的方法。

  1. 将CSS的内容复制到外部css文件中,该文件放在名为www。
  2. 的子目录中
  3. 在您的Shiny脚本中引用该文件。
  4. 在脚本中插入适当的div语句以包装要加载的代码。
  5. 修改CSS,使动画的z-index低于绘图的z-index,这样当绘图出现时,它将呈现在动画的顶部。
  6. 例如,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%; } }
    

    然后在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)
    

答案 1 :(得分:1)

基于上面的代码,我创建了一个Shiny模块,根据是否绘制Shiny绘图自动显示/隐藏加载动画(例如,如果仅在单击动作按钮后显示绘图,则需要确保加载动画直到那时才显示。)

该模块在https://github.com/andrewsali/plotlyBars的github上可用,安装完成后,您也可以直接从那里运行该示例。

加载这个迷你库可以很容易地创建动画闪亮图,只需用plotlyBarsUI替换plotlyOutput / renderPlotly并调用模块plotlyBars。有关如何使用Shiny模块的详细信息,请参阅github站点上的示例应用程序。

有效地代码所做的是,一旦启动了反应创建绘图,它就会显示动画,并在反应失败时隐藏它(例如req或validate停止处理)。