Flexdashboard水平滚动条与DataTable

Question

我正在尝试制作一个仪表板，其中一个列中的图表和另一列中的数据表。

我需要图表比DT更大，但是DT超越了图形的大小。

这是一个例子：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny
---

<style> #dt{ overflow: auto; } </style>   


```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
library(plotly)
diamonds <-  diamonds[1:20,]
```



Column {data-width=900}
-----------------------------------------------------------------------
### Chart A 
```{r}
plot_ly(diamonds,
        x = ~ cut,
        y = ~ price,
        color = ~ clarity)
```

### Chart B 
```{r}
dt <- datatable(diamonds ,options = list(c(scrollY="200px", scrollX=TRUE, pageLength = 100)),  filter = 'top')
dt

我一直在尝试不同的方法来指定数据宽度，但到目前为止还没有任何方法。

有没有人知道如何让数据表有一个水平滚动条？ flexdashboard可以实现吗？

例如，我希望数据表只显示几列，用户可以滚动查看其余列，以便图表将成为仪表板的主要焦点。

Answer 1

我已经编辑了一些代码，我认为下面的版本就是你所追求的。我改变了以下内容：

1.从标题定义中删除“orientation：rows”行。 2.将图表分成2个单独的列。 3.根据上面的Thomas John Flahertys评论，将“vertical_layout：scroll”更改为“vertical_layout：fill”。

代码现在写道：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
runtime: shiny
 ---

<style> #dt{ overflow: auto; } </style>   


```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
library(plotly)
diamonds <-  diamonds[1:20,]
```



Column {data-width=300}
-----------------------------------------------------------------------
### Chart A 
```{r}
plot_ly(diamonds,
        x = ~ cut,
        y = ~ price,
        color = ~ clarity)
```

Column {data-width=100}
-----------------------------------------------------------------------
### Chart B 
```{r}
dt <- datatable(diamonds ,options = list(c(scrollY="200px", scrollX=TRUE, pageLength = 100)),  filter = 'top')
dt
```