为ggplotly堆叠条形图添加“重力”效果：取消中间类别后上方类别下移

不需要Shiny，我们可以通过给Plotly图表添加自定义JavaScript代码，实现图例点击后自动重新堆叠剩余类别的效果，生成的HTML文件可以直接通过邮件分发。

步骤1：修正数据类型并构建基础图表 #

首先把value列转为数值型（原代码中为字符型，会导致堆叠计算错误）：

library(plotly)
library(ggplot2)
library(dplyr)
library(htmlwidgets)

data <- data.frame(
  area = rep(c('EU', 'USA'), each = 3),
  category = c('A', 'B', 'C', 'A', 'B', 'C'),
  value = as.numeric(c('35', '45', '20', '25', '45', '30')) # 转为数值型
)

# 构建ggplot并转为plotly对象
p <- ggplot(data, aes(fill = category, y = value, x = area)) + 
  geom_bar(position = "stack", stat = "identity")
p <- ggplotly(p)

步骤2：添加自定义JavaScript实现重堆叠逻辑 #

通过onRender函数添加JS代码，监听图例点击事件，实时重新计算每个可见trace的堆叠基准（base）：

p <- p %>% onRender("
function(el, x) {
  var plot = Plotly.getPlot(el);
  
  // 定义重堆叠函数
  function reStack() {
    // 按x轴分组（每个area对应一组trace）
    var groups = {};
    plot.data.forEach(function(trace) {
      var groupKey = trace.x[0];
      if (!groups[groupKey]) groups[groupKey] = [];
      groups[groupKey].push(trace);
    });
    
    // 遍历每个分组，重新计算堆叠基准
    Object.values(groups).forEach(function(group) {
      // 过滤可见trace并保持原始顺序
      var visibleTraces = group.filter(trace => trace.visible !== false);
      var cumulative = 0;
      visibleTraces.forEach(function(trace) {
        // 更新当前trace的堆叠基准
        Plotly.restyle(el, 'base', [Array(trace.y.length).fill(cumulative)], [trace.index]);
        // 累计更新基准值
        cumulative += trace.y.reduce((a,b) => a+b, 0);
      });
    });
  }
  
  // 初始加载时执行一次重堆叠
  reStack();
  
  // 监听图例点击事件，触发重堆叠
  el.on('plotly_legendclick', function() {
    setTimeout(reStack, 100); // 延迟执行确保Plotly已更新元素可见性
  });
}
")

步骤3：保存或展示图表 #

运行代码后，图表会在RStudio中显示，点击图例取消某个类别时，剩余类别会自动向上对齐堆叠。你可以用saveWidget将图表保存为自包含的HTML文件，方便邮件分发：

saveWidget(p, "stacked_bar_chart.html", selfcontained = TRUE)

效果说明 #

• 初始状态下，三个类别正常堆叠
• 取消选中类别A后，B和C会从底部开始重新堆叠，不会出现悬浮
• 重新选中A后，会自动恢复原始堆叠顺序

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