R：Shiny：如何在shinyapp中将gvisTable与中心对齐

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

您可以尝试使用css直接在桌面上设置tag$style。

例如：

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的左右边距设置为table ID元素中的所有resumen。 table周围的左右边距应该平均分割，从而形成一个居中的表格。

对于motionChart，实际图表是embed元素，因此您可以通过使用javascript设置align属性来更改对齐方式。

在Chrome中，通过一些WorldPhone数据，我得到了这个：