R 闪亮的中心情节

Question

我希望以下应用程序中的 3 个圆环图在其 div 内居中，但它们都是右对齐的。当更改浏览器窗口（macOS 上的 Safari）的宽度时，它们会按照我希望的方式居中，但在页面最初加载时不会居中。

有什么想法如何使这 3 个图表始终位于其下方显示的标题上方的中心吗？

library(shiny)
library(plotly)

# Define UI for application
ui <- navbarPage("Home",                     
                 tabPanel("Tab1",
                          tags$style(type="text/css",
                                     "h3 { text-align:center; }"
                 ),
                          fluidRow(
                              column(4,
                                     h2(plotlyOutput("plot1", height = "100%")),
                                     h3("Score")
                              ),
                              column(4,
                                       h2(plotlyOutput("plot2", height = "100%")),
                                       h3("Score")
                              ),
                              column(4,
                                     h2(plotlyOutput("plot3", height = "100%")),
                                     h3("Score")
                              )
                          )
                     )
)

# Define server logic
server <- function(input, output) {

   output$plot1 <- renderPlotly({

       iScore <- sample(70:100, 1)

       plot_ly(width = 150, height = 150,
               marker = list(colors = c("#65b146", "rgba(0,0,0,0)"))) %>%
           add_pie(values = c(iScore, 100 - iScore),
                   hole = .7,
                   textposition = 'none') %>%
           layout(autosize = TRUE,
                  xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  showlegend = FALSE,
                  annotations = list(text = paste0("<b>",iScore,"</b>"),
                                     align = "center",
                                     font = list(size = 24),
                                     showarrow = FALSE)) %>%
           config(displayModeBar = F)
   })

   output$plot2 <- renderPlotly({

       iScore <- sample(70:100, 1)

       plot_ly(width = 150, height = 150,
               marker = list(colors = c("#65b146", "rgba(0,0,0,0)"))) %>%
           add_pie(values = c(iScore, 100 - iScore),
                   hole = .7,
                   textposition = 'none') %>%
           layout(autosize = TRUE,
                  xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  showlegend = FALSE,
                  annotations = list(text = paste0("<b>",iScore,"</b>"),
                                     align = "center",
                                     font = list(size = 24),
                                     showarrow = FALSE)) %>%
           config(displayModeBar = F)
   })

   output$plot3 <- renderPlotly({

       iScore <- sample(70:100, 1)

       plot_ly(width = 150, height = 150,
               marker = list(colors = c("#65b146", "rgba(0,0,0,0)"))) %>%
           add_pie(values = c(iScore, 100 - iScore),
                   hole = .7,
                   textposition = 'none') %>%
           layout(autosize = TRUE,
                  xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  showlegend = FALSE,
                  annotations = list(text = paste0("<b>",iScore,"</b>"),
                                     align = "center",
                                     font = list(size = 24),
                                     showarrow = FALSE)) %>%
           config(displayModeBar = F)
   })
}

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

要将绘图嵌入到 div 中，您应该使用div()代替h2()，并且要居中，只需指定其align="center"参数：

div(plotlyOutput("plot1", height = "100%"), align = "center")