r - 如何在 Quarto 中用按钮隐藏图表？

Question

我想知道是否可以使用按钮隐藏图表，就像您可以使用 code-fold: true 使用代码块来隐藏图表一样。图表有类似的方法吗？这是一个可重现的例子:

---
title: "How to hide graph by button"
format: 
  html:
    code-fold: true
engine: knitr
---

Example code:

```{r}
library(ggplot2)
ggplot(mtcars, aes(x = qsec, y = mpg)) + geom_point()
```

输出:

如您所见，您可以使用名为“代码”的按钮来隐藏代码块。有没有办法只对 Quarto 中的图形执行此操作？

Answer 1

使用一点 javascript 我们可以在 Quarto 中实现这一点。

---
title: "How to hide graph by button"
format: 
  html:
    code-fold: true
    include-after-body: graph_fold.html
engine: knitr
---

Example code:

```{r}
library(ggplot2)

ggplot(mtcars, aes(x = qsec, y = mpg)) + geom_point()

ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()

print("Its not a graph")
```

graph_fold.html

<script>
function graph_fold() {
    cells = document.querySelectorAll(".cell:has(img)");
    cells.forEach(cell => {
      imgs = cell.querySelectorAll(".cell-output-display:has(p img)");
      imgs.forEach(img => {
        det = document.createElement("details");
        sum = document.createElement("summary");
        det.appendChild(sum);
        det.children[0].innerText = "Graph";
        img_clone = img.cloneNode(true);
        det.appendChild(img_clone);
        cell.replaceChild(det, img);
      });
    });
}

window.onload = graph_fold();  
</script>

---

---

---