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")

中心在R闪亮的情节情节

1 个答案: