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

looking in the shiny group on Google:

在Google上看着闪亮的群体:

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

I've found a solution, however i just know the basics of HTML and a little bit of CSS. How can i implement the solution within my code?

我找到了一个解决方案,但我只知道HTML的基础知识和一点点CSS。如何在我的代码中实现解决方案?

I need to put the gvisTable to the center. I put the code directly to the htmlOutput function, as an argument but get an error:

我需要把gvisTable放到中心位置。我把代码直接放到htmlOutput函数,作为参数,但得到一个错误:

**Note: this is the only change i've done to my code.

**注意:这是我对代码所做的唯一更改。

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

Error:

ERROR: argument is not interpretable as logical

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

        )

      )
    )
  )))

1 个解决方案

#1

You can try setting the css directly on the table, using a tag$style.

您可以尝试使用标签$ style直接在表格上设置css。

For example:

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

          ) 

The css sets the right and left margins to auto to all table in the elements that have the resumen id. The right and left margin around the table should be split equally resulting in a centered table.

css将右边距和左边距设置为具有resumen id的元素中的所有表格。桌子周围的左右边距应平均分割,形成一个居中的桌子。

For the motionChart, the actual chart is an embed element so you can change the alignment by setting the align attribute using javascript.

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

In chrome, with some WorldPhone data I get this:

在chrome中,通过一些WorldPhone数据,我得到了这个: