带有 DataTable 的 Flexdashboard 水平滚动条

Question

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

我需要图表比 DT 大，但 DT 覆盖了 plotly 的大小。

这是一个例子：

---
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.从标题定义中删除了“方向：行”行。
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
```