javascript - Twitter Bootstrap 选项卡 Pane 中未加载 Morris JS 图表

Question

我有一个 Morris JS 图表试图在 Twitter Bootstrap 选项卡 Pane 中加载。选项卡工作正常，但无法加载图表。

看起来这篇文章讨论了这个问题:http://www.doidea.se/blog/morris-js-charts-in-bootstrap-tabs

我如何将他们的解决方案转化为我的 Rails 代码？

这是我的代码:

查看:

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">
    <%= content_tag :div, "", id: "info_chart", data: { info: @chart_data } %>
  </div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Application.JS

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

ControllerName.js.coffee

$ ->
  # only use morris if the post chart element is on the page.
  if $('#info_chart').length > 0
    Morris.Bar
      element: 'info_chart'
      data: $('#info_chart').data('info')
      xkey: 'x'
      ykeys: ['y']
      labels: ['label']

Answer 1

针对我在选项卡上未正确显示的单个图表的情况找到了解决方案:

将图表保存为变量:

var usage_graph = Morris.Line({
  // config
});

然后监听选项卡上的变化，并重绘图表:

$('ul.nav a').on('shown.bs.tab', function (e) {
    usage_graph.redraw();
});

我希望这对其他人有帮助。