Wie kombiniere ich Zeilen- und Spaltenlayout in Flexdashboard?

Question

Für ein neues Projekt möchte ich das neue Flexdasboard-Paket ausprobieren. Ich denke an ein Layout, bei dem die Säulen- und Reihenorientierung irgendwie kombiniert ist.

Das Layout von dem ich denke, ist so etwas wie dieses:

Wenn ich ändern diesen Code:

--- 
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} 
``` 

in diese:

--- 
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} 
``` 

(ofcourse) Das funktioniert nicht, aber ich habe den richtigen Weg nicht gefunden. Hat jemand eine Idee?

Answer 1

Dies scheint mit grundlegenden Zeilen und Spalten nicht möglich zu sein, kann aber durch Verwendung einer Seitenleiste für den Inhalt des linken Bedienfelds erreicht werden. Dadurch wird die Formatierung des linken Bedienfelds im Vergleich zu den anderen geändert, aber das Aussehen kann dann durch Bearbeiten des CSS nach Ihren Wünschen angepasst werden. Beachten Sie, dass Sie die Breite der Seitenleiste ändern können, indem Sie die Datenbreitenoption z. {.sidebar Daten width = 300}

--- 
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} 
``` 

Welche ...

Das Aussehen der Seitenleiste gibt kann dann nach Belieben bearbeitet werden. Zum Beispiel:

Um

1. Änderung der Hintergrundfarbe der Seitenwand auf weiß (wenn Sie es wollen die anderen Platten passen),
2. den oberen Rand mit den anderen Platten auszurichten und
3. hinzufügen Grenzen links und unten die anderen Platten passen:

bearbeiten die CSS-Stylesheet für .section.sidebar zu

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

die Polsterung zu ändern, die Daten-padding-Option in flexdashboard Abschlags verwenden:

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

Jetzt sieht es wie folgt aus:

Answer 2

Was Sie wirklich brauchen, ist die fillCol und fillRow Funktionen. Werfen Sie einen Blick auf diese: http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

Answer 3

Ein alternativer Ansatz kann die Verwendung von Absolute Panels von glänzend sein. Anstatt zu versuchen, eine Rasteranordnung zu finden, die zu allen Teilen auf dem Bildschirm passt, verwenden Sie eine absolute Fläche mit zusammenklappbaren Schaltflächen, um selektiv auszuwählen, welche Felder zu einer bestimmten Zeit erscheinen. Dies ermöglicht dem Benutzer auszuwählen, welche Plots und Informationen präsentiert werden sollen. Die Idee entstand aus der Superzip-App https://shiny.rstudio.com/gallery/superzip-example.html, funktioniert aber gut in Flexdashboard.

Im folgenden Beispiel können Plots beim Laden der Seite angezeigt oder ausgeblendet werden.Klicken Sie auf die Schaltflächen, um sie anzuzeigen oder zu entfernen. Dies war sehr hilfreich, wenn Sie Flugblätter mit Grundstücken mischen, um zu vermeiden, dass die Karte mit Grundstücken überflutet wird (wobei Flächen wie zuvor aufgrund von Ertrinkungs-Problemen begrenzt waren).

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

    ) 

    ```