如何在gt表格的图片中启用Quarto lightbox功能?
问题描述
Quarto 1.4 内置的lightbox功能支持点击普通图片时,以缩放动画展示放大版本,但使用local_image()或ggplot_image()函数将图片嵌入gt表格后,该lightbox特性无法生效。以下是可复现问题的Quarto文档代码:
--- title: "gt lightbox test" format: html: lightbox: true editor: visual ---
library(tidyverse) library(gt)
普通图片可正常触发lightbox
plot_object <- ggplot( data = gtcars, aes(x = hp, y = trq, size = msrp) ) + geom_point(color = "blue") + theme(legend.position = "none") plot_object
gt表格内的图片无法触发lightbox
dplyr::tibble( text = "Here is a ggplot:", ggplot = NA ) |> gt() |> text_transform( locations = cells_body(columns = ggplot), fn = function(x) { plot_object |> ggplot_image(height = px(200)) } )
解决方案
Quarto的lightbox通过识别带有data-lightbox属性的<img>标签实现功能,但gt生成的表格内图片默认不带该属性。我们可以手动为表格内的图片添加lightbox所需属性,具体有两种实现方式:
方式一:直接构建带属性的HTML图片标签
dplyr::tibble( text = "Here is a ggplot:", ggplot = NA ) |> gt() |> text_transform( locations = cells_body(columns = ggplot), fn = function(x) { # 将ggplot保存为临时图片文件 tmp_img <- tempfile(fileext = ".png") ggsave(tmp_img, plot_object, width = 6, height = 4, dpi = 150) # 生成带lightbox属性的img标签 htmltools::tags$img( src = tmp_img, height = "200px", `data-lightbox` = "gt-table-plots", # 分组标识,同组图片可通过lightbox切换 `data-title` = "表格内的散点图" # lightbox显示的标题(可选) ) } )
方式二:修改ggplot_image生成的对象属性
dplyr::tibble( text = "Here is a ggplot:", ggplot = NA ) |> gt() |> text_transform( locations = cells_body(columns = ggplot), fn = function(x) { # 生成初始的ggplot_image对象 img_element <- plot_object |> ggplot_image(height = px(200)) # 为img标签添加lightbox属性 img_element$tag$attribs[["data-lightbox"]] <- "gt-table-plots" img_element$tag$attribs[["data-title"]] <- "Table Embedded Plot" img_element } )
原理说明
Quarto的lightbox会自动扫描页面中带有data-lightbox属性的图片,为其绑定点击放大的交互逻辑。通过手动给gt表格内的图片添加该属性,即可让lightbox功能覆盖到这些图片。data-lightbox的属性值可作为分组标识,同一组的图片在lightbox中可通过前后按钮切换查看。
内容的提问来源于stack exchange,提问作者datascienceuseR
相关产品推荐
相关产品推荐

