静态RMarkdown flexdashboard中billboarder图表图例无法正常加载问题

问题原因 #

flexdashboard的标签页组件默认会将非激活的标签内容设置为隐藏状态，billboarder图表初始化时无法获取隐藏容器的宽高参数，就会出现图例计算错误、显示异常的问题，只有默认展示的首屏内容里的图表可以正常渲染。

解决方法 #

方案1：添加重绘回调（推荐，不改变原有布局） #

加载htmlwidgets包，给billboarder图表添加激活标签页时的重绘逻辑即可，修正后的完整代码如下：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(billboarder)
library(data.table)
library(htmlwidgets)

Column {.tabset} #

Dummy tab #

Chart A #

billboarder() %>%
  bb_linechart(melt(data.table(rock, keep.rownames = TRUE)[, area := as.numeric(area)], id.vars = "rn", measure.vars = c("area", "peri")), bbaes(rn, value, variable)) %>% 
  onRender("
    function(el, x) {
      document.querySelectorAll('a[data-toggle=\"tab\"]').forEach(function(tab) {
        tab.addEventListener('shown.bs.tab', function(e) {
          if (e.target.getAttribute('href') == '#' + el.closest('.tab-pane').id) {
            el.billboard.resize();
          }
        })
      })
    }
  ")

### 方案2：修改布局模式
如果你不需要固定高度的填充布局，把输出参数里的`vertical_layout: fill`改成`vertical_layout: scroll`，也可以规避这个渲染冲突问题。

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