Javascript 调用非活动引导选项卡内容

Question

我有一个带有 Bootstrap (v3) 选项卡的页面：

https://getbootstrap.com/docs/3.3/javascript/#tabs

我在每个选项卡中呈现了一些迷你图：

https://omnipotent.net/jquery.sparkline/#s-docs

并像这样调用：

  $('.sparkline-pie-remaining').sparkline('html', {
    type: 'pie',
    sliceColors: ['#1ab394', '#ed5565','#ddd'],
    width: '18',
    height: '18',
    offset: -90,
    disableTooltips: true,
    borderWidth: 1,
    borderColor: '#676a6c'
  });

问题是在非活动选项卡上不会调用它。当显示选项卡时，我尝试过的回调，但是每次打电话时都会调用此选项卡更改并清除图形。

如何在呈现页面时在非活动选项卡内容上进行此调用？这是重现该问题的 CodePen：

https://codepen.io/dantappin/pen/rNegXOP

Answer 1

Sparkline 图表未在非活动选项卡内呈现的原因是因为该选项卡面板 div 具有“display:none”属性。这是documentation you provided 的一部分（请参阅“隐藏的迷你图”部分）：

如果您尝试在当前未显示的标签中显示迷你图 可见（即标签或其父标签之一设置为显示：无） 然后你会发现你的迷你图还没有被渲染 最后确实使标签可见。这是因为标签带有 display:none 没有大小，因此无法创建画布并调整其大小 用于渲染迷你图。

解决方法是调用 $.sparkline_display_visible() 函数 任何时候迷你图可能已经变得可见，因此它可以 正确渲染。这是本网站用来处理 隐藏在不同选项卡部分中的迷你图；网站 在 tab-changed 回调中调用例程。

解决方案也包含在相同的引用文本中。您可以通过在选项卡按钮或选项卡面板 div 上附加事件处理程序并在选项卡第一次变为活动状态时调用 $.sparkline_display_visible() 来实现此目的。

编辑：您可以通过激活选项卡并在 JS 控制台中执行一次$.sparkline_display_visible() 来快速测试。