R：闪亮：如何在闪亮应用中将 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 将具有resumen id 的元素中的所有table 的左右边距设置为auto。 table 周围的左右边距应平均分割，从而形成居中的表格。

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

在 chrome 中，我得到了一些 WorldPhone 数据：