Question

在我的图表加载时，我试图实现一个旋转轮。（https://github.com/daattali/advanced-shiny/tree/master/plot-spinner）

例如，我有以下代码：

UI

mycss <- "
#plot-container {
position: relative;
}
#loading-spinner {
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
margin-top: -33px;  /* half of the spinner's height */
margin-left: -33px; /* half of the spinner's width */
}
#plot.recalculating {
z-index: -2;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(mycss))),
  # actionButton("btn", "Plot (takes 2 seconds)"),

  div(id = "plot-container",
      tags$img(src = "spinner.gif",
               id = "loading-spinner"),
      highchartOutput("plot")
  )
)

服务器

shinyServer(function(input, output,session) {
output$plot <- renderHighchart({


  Sys.sleep(2)



  rainfall <- c(49.9, 71.5, 106.4, 129.2, 144, 176,
                135.6, 148.5, 216.4, 194.1, 95.6, 54.4)

  temperature <- c(7, 6.9, 9.5, 14.5, 18.2, 21.5,
                   25.2, 26.5, 23.3, 18.3, 13.9, 9.6)

  col1 <- "#90ED7D"
  col2 <- "#5C5C61"

  highchart() %>% 
    hc_title(text = "Tokyo Climate") %>% 
    hc_legend(enabled = FALSE) %>% 
    hc_xAxis(categories = month.abb) %>% 
    hc_yAxis_multiples(
      list(
        title = list(text = "Temperature"),
        align = "left",
        showFirstLabel = FALSE,
        showLastLabel = FALSE,
        labels = list(format = "{value} &#176;C", useHTML = TRUE)
      ),
      list(
        title = list(text = "Rainfall"),
        align = "right",
        showFirstLabel = FALSE,
        showLastLabel = FALSE,
        labels = list(format = "{value} mm"),
        opposite = TRUE
      )
    ) %>% 
    hc_add_series(name = "Rainfall", type = "column",
                  data = rainfall, yAxis = 1) %>% 
    hc_add_series(name = "Temperature", type = "spline",
                  data = temperature) %>% 
    hc_add_series(name = "Sunshine", type = "pie",
                  data = list(list(y = 2020, name = "Sunshine hours",
                                   sliced = TRUE, color = col1),
                              list(y = 6740, name = "Non sunshine hours (including night)",
                                   color = col2,
                                   dataLabels = list(enabled = FALSE))),
                  center = c('20%', 45),
                  size = 80)
  })

})

这是正常的。但我想将ui模板更改为以下内容：

新ui

mycss <- "
.plot-container {
position: relative;
}
.loading-spinner {
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
margin-top: -33px;
margin-left: -33px;
}
.plot.recalculating {
z-index: -2;
}
"


ui <-dashboardPage(skin = "black",

                   dashboardHeader(),
              dashboardSidebar(


                sidebarMenu(id = "sidebarmenu"


                )
                ##############


              ),

              dashboardBody(

                tags$head(tags$style(HTML(mycss))),

                div(id = "plot-container",
                    tags$img(src = "spinner.gif",
                             id = "loading-spinner"),
                    highchartOutput("plot")
                )


                ))

像这样，旋转轮出现在情节之上，并且在情节之后不会消失....

有人可以帮助我吗？

等待纺车R闪亮

0 个答案: