• R语言
  • crosstalk 包的显示问题

如题,我在使用 crosstalk 包时遇到了一个不知道如何用语言描述的问题,非要描述的话,大概就是不管是用在flexdashboard 里还是只是生成 html 文档,crosstalk 相关的内容都像被吃掉了一样显示不全。

把 crosstalk 用在 flexdashboard 中

代码如下:

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

```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(crosstalk)
```

Column {data-height=650}
-----------------------------------------------------------------------

### Table A

```{r}
shared_mtcars <- SharedData$new(mtcars)
bscols(
  widths = c(3, 9),
  list(
    filter_checkbox("cyl", "Cylinders", shared_mtcars, ~ cyl, inline = TRUE),
    filter_slider("hp", "Horsepower", shared_mtcars, ~ hp, width = "100%"),
    filter_select("auto", "Automatic", shared_mtcars, ~ ifelse(am == 0, "Yes", "No"))
  ),
  DT::datatable(shared_mtcars)
)
```

效果如下:

把 crosstalk 用于生成 html 文档

代码如下:

---
title: "test3"
author: "-"
date: '2022-05-25'
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## crosstalk

```{r}
library(DT)
library(crosstalk)

shared_mtcars <- SharedData$new(mtcars)
bscols(
  widths = c(3, 9),
  list(
    filter_checkbox("cyl", "Cylinders", shared_mtcars, ~ cyl, inline = TRUE),
    filter_slider("hp", "Horsepower", shared_mtcars, ~ hp, width = "100%"),
    filter_select("auto", "Automatic", shared_mtcars, ~ ifelse(am == 0, "Yes", "No"))
  ),
  DT::datatable(shared_mtcars)
)
```

效果如下:

放到幻灯片里

比如生成 ioslides,效果如下:

flexdashboard 加一段 CSS 设置(我不知道为什么 crosstalk 要设置左右边距为 -30px,以下是去除边距设置):

```{css, echo=FALSE}
.container-fluid.crosstalk-bscols {
  margin-left: inherit;
  margin-right: inherit;
}
```

html_documentioslides_presentation 需要指定表格宽度为 100%:

  DT::datatable(shared_mtcars, width = '100%')

然后设置水平方向超宽时使用滚动条:

```{css, echo=FALSE}
.datatables.html-widget {
  overflow-x: auto;
}
```