带筛选复选框的Plotly图表在HTML输出中左边缘截断问题求助

问题概述 #

用crosstalk搭配plotly做带响应式复选框筛选的散点图，导出HTML后图表左边缘（含坐标轴标签）被截断，但在RStudio控制台查看器里显示正常。试过调整fig-width/fig-height、ggplotly(width)、layout(width)、fig-responsive: false等方法都没解决。

可复现代码 #

用户提供的测试代码如下：

YAML配置 #

---
format:
  html: 
    grid:
      sidebar-width: 300px
      body-width: 900px
      margin-width: 300px
      gutter-width: 1.5rem
fig-responsive: false
editor_options: 
  chunk_output_type: console
---

R代码块 #

library(tidyverse)
library(plotly)
library(knitr)
library(crosstalk)

library(palmerpenguins)
df <- penguins 
df <- drop_na(penguins)

INDIVIDUAL PLOT #

gg <- df %>% ggplot(aes(x = bill_length_mm, y = bill_depth_mm, color = species)) +
  geom_jitter()
gg 

PLOT W FILTER #

#Create new shared data for crosstalk library
shared_data <- df %>% 
  select(bill_depth_mm, bill_length_mm, species) %>%  
  SharedData$new()

#Create scatter plotly column
plty <- shared_data %>% 
  plot_ly(x = ~bill_length_mm, y = ~bill_depth_mm, color = ~species, type="scatter", mode="markers") 

#Combine filter(left) with scatter plotly (right)
flt_pltl <-bscols(widths = c(2,10), #<-(col1,col2) widths
       list(
            filter_checkbox(id = "species", label = "Species", sharedData = shared_data, group = ~species)),plty)

flt_pltl

解决方案 #

方法1：手动增大Plotly图表左侧边距 #

问题核心是Plotly默认左侧边距不够，被布局挤压导致截断。直接在plot_ly后添加layout调整边距：

plty <- shared_data %>% 
  plot_ly(x = ~bill_length_mm, y = ~bill_depth_mm, color = ~species, type="scatter", mode="markers") %>%
  layout(margin = list(l = 70))  # 把左侧边距从默认值调大，可根据实际效果微调数值

方法2：调整bscols的宽度比例 #

原widths = c(2,10)的比例在grid布局下可能让右侧图表宽度计算异常，尝试调整为更均衡的比例：

flt_pltl <- bscols(
  widths = c(3, 9),  # 缩小筛选栏宽度占比，给图表留更多空间
  list(filter_checkbox(id = "species", label = "Species", sharedData = shared_data, group = ~species)),
  plty
)

方法3：临时禁用Quarto的grid布局测试 #

如果grid布局是冲突根源，可以先注释掉grid配置验证：

format:
  html: 
    # grid:
    #   sidebar-width: 300px
    #   body-width: 900px
    #   margin-width: 300px
    #   gutter-width: 1.5rem

原理说明 #

本质是Quarto的grid布局和crosstalk的bscols布局在宽度计算上存在冲突，导致Plotly图表的左侧边距被挤压，无法完整显示坐标轴元素。通过增大Plotly内部边距或调整布局比例，就能避免元素溢出被截断。

内容的提问来源于stack exchange，提问作者Tb0nes