仪表板四开纸框中的多个过滤器

Question

我想在四开仪表板中显示来自

crosstalk

的多个过滤器。不幸的是，它们并不全部可见。在这里我创建了一些可重现的代码：

---
title: "Palmer Penguins"
author: "Quinten"
format: dashboard
#logo: penguins.png
theme: zephyr
---

```{r}
# import packages
library(tidyverse)
library(crosstalk)
library(DT)
library(plotly)
library(gt)
library(palmerpenguins)

# import data
penguins <- palmerpenguins::penguins

# Crosstalk dataset
shared_penguins <- SharedData$new(penguins)

# Set theme
theme_set(theme_minimal())
```

# {.sidebar}

This is a simple static dashboard to show what is possible with the newest version of [Quarto v1.4](https://quarto.org/docs/blog/posts/2024-01-24-1.4-release/). To make it a bit interactive we use the [crosstalk](https://github.com/rstudio/crosstalk) package and [plotly](https://plotly.com/r/).

***

In this dashboard we visualize the [palmerpenguins](https://allisonhorst.github.io/palmerpenguins/) dataset. In the table below is some basic information about the data:

| Specie       |  Count             |
|--------------|---------------------|
| **Adelie**     | `{r} nrow(subset(penguins, species == "Adelie"))`  |
| **Gentoo**   | `{r} nrow(subset(penguins, species == "Gentoo"))`   |
| **Chinstrap**  | `{r} nrow(subset(penguins, species == "Chinstrap"))` |

***

# Analysis

## Row {height=40%}

### Column {width=70%}

```{r}
#| title: "Slider options"
filter_slider("bill_length_mm", "bill length", shared_penguins, ~bill_length_mm)
filter_slider("bill_depth_mm", "bill depth", shared_penguins, ~bill_depth_mm)
filter_slider("flipper_length_mm", "flipper length", shared_penguins, ~flipper_length_mm)
filter_slider("body_mass_g", "body mass", shared_penguins, ~body_mass_g)
```

### Column {width=30%}

```{r}
filter_checkbox("sex", "sex", shared_penguins, ~sex)
```


## Row {height=60%}

```{r}
#| title: "Flipper length vs body mass"
p <- ggplot(shared_penguins, aes(x = flipper_length_mm, y = body_mass_g, color = species, shape = species)) +
  geom_point() +
  scale_color_manual(values = c("darkorange","darkorchid","cyan4")) 

ggplotly(p)
```

输出：

如您所见，滑块选项并非全部可见。它们不适合放在盒子里。当您单击该部分的弹出窗口时，它会显示得更好：

有没有办法让滑块像弹出窗口中那样更加明显？

Answer 1

首先将所有滑块放入

<div>

中，这样我们就可以更改其子级的 CSS，而不影响页面的其余部分。你的第一个 R 块可以是：

slider_width = 700
#| title: "Slider options"
htmltools::div(
    id = "sliderdiv", 
    filter_slider("bill_length_mm", "bill length", shared_penguins, ~bill_length_mm, width = slider_width),
    filter_slider("bill_depth_mm", "bill depth", shared_penguins, ~bill_depth_mm, width = slider_width),
    filter_slider("flipper_length_mm", "flipper length", shared_penguins, ~flipper_length_mm, width = slider_width),
    filter_slider("body_mass_g", "body mass", shared_penguins, ~body_mass_g, width = slider_width)
)

我已手动设置

width

，以防您想做但可能不需要这样做。然后在文档的开头添加一些 CSS，以：

1. 缩小标签文本并向下移动一点。
2. 缩小滑块值文本。
3. 删除网格标签（您可以在拖动滑块时看到所选的滑块值）。

<style>
#sliderdiv .control-label {
    font-size: 10px;
    position: relative;
    top: 25px;
    left: 30px;
}
#sliderdiv .irs-from, #sliderdiv .irs-to {
    font-size: 8px !important;
}
#sliderdiv .irs-grid {
    display: none !important;
}
</style>

您可能想稍微调整一下这些值，但本质上这意味着要显示的内容较少。即使我们的盒子变得足够小以至于需要垂直滚动条，滑块、标签和值仍然可见：