R：閃亮：如何將gvisTable對准Shinyapp的中心

Question

在Google的閃亮群組中尋找：

https://groups.google.com/forum/#!topic/shiny-discuss/J8C2CnFOTOM

我找到了一個解決方案，但是我只知道HTML和CSS的基礎知識。 如何在代碼中實施解決方案？

我需要將gvisTable放在中心。 我將代碼作為參數直接放入htmlOutput函數，但出現錯誤：

**注意：這是我對代碼所做的唯一更改。

 tabPanel('Ikasa Adwords MotionChart',
                   br(),
                   htmlOutput("resumen",
                              tags$style(type="text/css",
                                         HTML("#summary>div { margin: 0 auto; }")
                              )),
                   br(),
                   br(),

錯誤：

ERROR: argument is not interpretable as logical

原始ui.R：

library(shiny)
library(googleVis)
# Rely on the 'WorldPhones' dataset in the datasets
# package (which generally comes preloaded).


# Define the overall UI
shinyUI(

  # Use a fluid Bootstrap layout
  fluidPage(    

    # Give the page a title
    br(),
    br(),
    br(),
    titlePanel("Ikasa Adwords"),

    # Generate a row with a sidebar
    br(),
    br(),
    sidebarLayout(      

      # Define the sidebar with one input



      sidebarPanel(
        dateRangeInput("dates", label = h3("Date range"),
                       start = "2015-01-01", end = "2015-02-15")

      ),



      mainPanel(
        tabsetPanel(

          tabPanel('Ika MotionChart',
                   br(),
                   htmlOutput("resumen",
                              tags$style(type="text/css",
                                         HTML("#summary>div { margin: 0 auto; }")
                              )),
                   br(),
                   br(),

                   htmlOutput("motionchart")

        )

      )
    )
  )))

Answer 1

您可以嘗試使用tag$style直接在表上設置css 。

例如：

tabPanel('Ika MotionChart',
                   br(),
                   htmlOutput("resumen"),
                   tags$style(HTML("#resumen table{ 
                                  margin: auto;
                                   }")),
                   br(),
                   br(),

                   htmlOutput("motionchart")
                   tags$script(HTML("
                        var p = document.getElementById('motionchart')
                        $(p).attr('align', 'center');"))

          ) 

css將auto設置左右邊距，以auto處理具有resumen ID的元素中的所有table 。 table周圍的左右邊緣應平均分配，以形成居中的桌子。

對於motionChart ，實際的圖表是一個embed元素，因此您可以通過使用javascript設置align屬性來更改對齊方式。

在chrome中，通過一些WorldPhone數據，我得到以下信息：