带有DataTable的Flexdashboard水平滚动条

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.从标题定义中删除了“方向：行”行。
2.将图表分为2个单独的列。
3.根据上面的Thomas John Flahertys的注释，将“ vertical_layout：滚动”更改为“ vertical_layout：填充”。

该代码现在显示为：

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