Flexdashboard'ta satır ve sütun yerleşimi nasıl birleştirilir?

Question

Yeni bir proje için yeni flexdasboard paketini denemek istiyorum. Sütun ve satır yönlendirmesinin bir şekilde bir araya getirildiği bir düzeni düşünüyorum.

düşündüğüm düzen içinde böyle bir şeydir:

Bu kodu değiştirirseniz: bu işe

--- 
title: "Focal Chart (Left)" 
output: flexdashboard::flex_dashboard 
--- 

Column {data-width=600} 
------------------------------------- 

### Chart 1 

```{r} 
``` 

Column {data-width=400} 
------------------------------------- 

### Chart 2 

```{r} 
``` 

### Chart 3 

```{r} 
``` 

:

--- 
title: "Focal Chart (Left)" 
output: flexdashboard::flex_dashboard 
--- 

Column {data-width=600} 
------------------------------------- 

### Chart 1 

```{r} 
``` 

Column {data-width=400} 
------------------------------------- 

Row {data-width=400} 
------------------------------------- 

### Chart 2 

```{r} 
``` 

### Chart 3 

```{r} 
``` 

Row {data-width=400} 
------------------------------------- 

### Chart 4 

```{r} 
``` 

(tabii) Bu işe yaramıyor, ama doğru yolu bulamadım. Bir fikri olan var mı? Bu, temel satırları ve sütunları kullanarak mümkün görünmüyor, ancak sol taraftaki panelin içeriğini tutmak için bir kenar çubuğu kullanılarak gerçekleştirilebiliyor.

Answer 1

Bu, sol panelin biçimlendirmesini diğerlerine göre değiştirecektir, ancak görünümü daha sonra css'yi düzenleyerek beğeninize eklenebilir. Veri genişliği seçeneğini kullanarak ör. Yan çubuğun genişliğini değiştirebileceğinizi unutmayın. {.sidebar veri genişliği = 300} verir

--- 
title: "Focal Chart" 
output: 
    flexdashboard::flex_dashboard: 
    orientation: rows 
--- 

Column {.sidebar data-width=500} 
------------------------------------- 
### Chart 1 
```{r} 
``` 

Row {data-height=350} 
------------------------------------- 
### Chart 2 
```{r} 
``` 

### Chart 3 
```{r} 
``` 

Row {data-height=650} 
------------------------------------- 
### Chart 4 
```{r} 
``` 

...

yan çubuğunun görünümü daha sonra beğeninize düzenlenebilir. Örneğin:

, değişim beyaza yan panelin arka plan rengi (bunu diğer paneller eşleştirmek istiyorsanız)

1. için
2. diğer panellerle üst kenarını hizalamak ve

düzenlemeyi

için .section.sidebar için css stil sayfası:

diğer panelleri maç için sol sınırlarını ve alt yazı

.section.sidebar { 
    top: 61px; 
    border-bottom: 10px solid #ececec; 
    border-left: 10px solid #ececec; 
    background-color: rgba(255, 255, 255, 1); 
} 

, dolgu değiştirmek flexdashboard markdown veri-dolgu seçeneğini kullanmak için: Şimdi

Column {.sidebar data-width=500 data-padding=10} 

, bu şuna benzer:

Answer 2

Ne gerçekten ihtiyacınız fillCol olduğunu ve fillRow işlevleri. Şunlara bir göz atın: http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

Answer 3

Alternatif bir yaklaşım, parlaklıktan absolutepanels kullanmak olabilir. Tüm parçaları ekrana sığdırmak için bir ızgara düzeni bulmaya çalışmak yerine, belirli bir zamanda hangi kutuların görüneceğini seçmek için katlama düğmeleri olan bir absolutepanel kullanın. Bu, kullanıcının hangi plotları ve sunuları istediğini seçmesini sağlar. Fikir, superzip uygulamasından https://shiny.rstudio.com/gallery/superzip-example.html evrildi, ancak flexdashboard'da iyi çalışıyor.

Aşağıdaki örnekte, sayfa yüklendiğinde görünecek veya gizlenebilecek parseller yapılabilir.Onları görünmesi veya kaybolması için düğmelerini tıklayın. Bu, haritayı arazilerle boğmaktan kaçınmak için yaprakçıkları parsellerle karıştırırken çok yararlı olmuştur (lekelenme sorunları nedeniyle araziler daha önce olduğu gibi).

--- 
    title: "Demo" 
    output: 
    flexdashboard::flex_dashboard: 
     orientation: columns 
     vertical_layout: fill 
    --- 


    ```{r setup, include=FALSE} 
    library(flexdashboard) 
    library(rmarkdown) 
    library(plotly) 
    library(shiny) 

    ``` 

    Column {data-width=400} 
    -------------------------------- 
    ### Planet Earth 

    ```{r} 

    library(leaflet) 
    m = leaflet() %>% addTiles() 
    m # a map with the default OSM tile layer 


    ``` 


    ```{r} 
    #plot setup 
    mtcars$am[which(mtcars$am == 0)] <- 'Automatic' 
    mtcars$am[which(mtcars$am == 1)] <- 'Manual' 
    mtcars$am <- as.factor(mtcars$am) 

    p <- plot_ly(mtcars, x = ~wt, y = ~hp, z = ~qsec, color = ~am, colors = c('#BF382A', '#0C4B8E')) %>% 
    add_markers() %>% 
    layout(scene = list(xaxis = list(title = 'Weight'), 
         yaxis = list(title = 'Gross horsepower'), 
         zaxis = list(title = '1/4 mile time'))) 


    set.seed(100) 
    d <- diamonds[sample(nrow(diamonds), 1000), ] 


    ########################## 
    absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE, 
       draggable = TRUE, top = 70, left = "auto", right = 20, bottom = "auto", 
       width = '30%', height = 'auto', 
       style = "overflow-y:scroll; max-height: 1000px; opacity: 0.9; style = z-index: 400", 

       h4(strong("Plot Explorer")), 

     HTML('<button data-toggle="collapse" data-target="#box1" class="btn-block btn-primary">dot plot</button>'), 
     tags$div(id = 'box1', class="collapse in", 

     plot_ly(d, x = ~carat, y = ~price, color = ~carat, 
      size = ~carat, text = ~paste("Clarity: ", clarity)) %>% layout(height=200) 

      ), 

    HTML('<button data-toggle="collapse" data-target="#box2" class="btn-block btn-warning">histogram</button>'), 
     tags$div(id = 'box2', class="collapse", 

     plot_ly(x = rnorm(500), type = "histogram", name = "Histogram") %>% layout(height=200) 
    ), 


      HTML('<button data-toggle="collapse" data-target="#box3" class="btn-block btn-danger">spinny thing</button>'), 
     tags$div(id = 'box3', class="collapse in", 

      p %>% layout(height=200) 
    ) 

    ) 

    ```