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

Question

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

看起来这篇文章讨论了这个问题: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();
});

我希望这有助于其他人.

Answer 2

首先，你要检查你使用的 morris.js 版本是否正确，github 上当前的 master 分支具有 redraw() 函数。

第二：确保您能够在 dom 中打印图表，比如您的第一个活动选项卡。

第三：在不活动的选项卡中添加另一个图形元素，为每个选项卡添加数据标识符以便能够使用以下命令重绘多个图形：

$('ul.nav a').on('shown.bs.tab', function (e) {
    var types = $(this).attr("data-identifier");
    var typesArray = types.split(",");
    $.each(typesArray, function (key, value) {
        eval(value + ".redraw()");
    })
});

该js将确定每当“显示”选项卡时涉及哪些数据标识符，例如，您可以有多个用逗号分隔的图形元素。然后它将获取标识符的值，这显然与图形元素相同，并对其调用 redraw() 函数。

我认为没有必要让它比这更轨道，当然你总是可以转换为咖啡脚本，但这应该可行。