flexdashboardで行と列のレイアウトを組み合わせる方法は？

Question

新しいプロジェクトのために、新しいflexdasboardパッケージを試してみたい。私は、列と行の向きが何らかの形で組み合わされたレイアウトを考えています。

私は考えていレイアウトは、このようなものである。この中

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

：

（ofcourseの）

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

私はこのコードを変更した場合

これはうまくいかないが、私は正しい方法を理解していない。誰にもアイデアはありますか？

Answer 1

これは基本的な行と列を使用するとは不可能ですが、サイドパネルを使用して左側のパネルの内容を保持することで実現できます。これにより、左パネルの書式が他のパネルと比べて変更されますが、cssを編集することによって、その外観を好みに合わせることができます。たとえば、データ幅オプションを使用してサイドバーの幅を変更することができます。与え{.sidebarデータ幅= 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} 
``` 

...

サイドバーの外観は、あなたの好みに合わせて編集することができます。たとえば：

白に変更サイドパネルの背景色を（あなたはそれが他のパネルを一致させたい場合）

1. するために、
2. は、他のパネルとの上端を合わせ、
へ

編集.section.sidebarためのCSSスタイルシート：

の境界線を追加するには、他のパネルに合わせて、左と下

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

は、パディングを変更flexdashboard値下げにデータパディングオプションを使用するには：今

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

、それは次のようになります。

Answer 2

は、何が本当に必要なのfillColです機能はfillRowです。これを見てみましょう：http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

Answer 3

代わりの方法は、光沢のある絶対的なパネルを使用することです。画面上のすべての部分に合わせてグリッドアレンジメントを見つけようとするのではなく、特定の時間にどのボックスが表示されるかを選択するためにボタンを折りたたむアブソリュートパネルを使用します。これにより、ユーザーはどのプロットと情報を提示するかを選択できます。このアイデアは、スーパージップアプリhttps://shiny.rstudio.com/gallery/superzip-example.htmlから進化しましたが、flexdashboardでうまく機能します。

以下の例では、ページが読み込まれるときにプロットを表示するか非表示にすることができます。ボタンをクリックすると、そのボタンが表示されたり消えたりします。これは、プロットを使って地図を溺れるのを避けるために、リーフレットとプロットを混在させるときに非常に便利でした（ここで、プロットは溺れた問題のために制限されていました）。

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

    ) 

    ```