带有 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

我一直在尝试不同的方法来指定数据宽度，但 none 到目前为止都有效。

有人知道如何让数据表具有水平滚动条吗？这可以用 flexdashboard 实现吗？

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

Answer 1

我稍微编辑了您的代码，我认为下面的版本就是您所需要的。我更改了以下内容：

1.从 header 定义中删除了 "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
```

带有 DataTable 的 Flexdashboard 水平滚动条

Flexdashboard horizontal scroll bar with DataTable

datatable

r

flexdashboard

r-plotly