Morris JS图表未在Twitter Bootstrap Tab窗格中加载

我有一个Morris JS图表试图在Twitter Bootstrap选项卡窗格中加载.选项卡工作正常,但图表不会加载.

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

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

这是我的代码:

视图:

  
Home
  
Profile
  
Messages
  
Settings




  
...
  

    <%= content_tag :div, "", id: "info_chart", data: { info: @chart_data } %>
  
  
...
  
...

的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']

tmartin314.. 12

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

将图表另存为变量:

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

然后在选项卡上监听更改,并重绘图表:

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

我希望这有助于其他人.