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

最佳答案部分正确。然而，问题是svg没有调整大小。为了确保调整svg的大小，您可以通过css修改它：

    if ($('#morris-stacked-bar-graph').length > 0) {
        var morris_bar = Morris.Bar({
            element: 'morris-stacked-bar-graph',
            data: [
                {x: '2011 Q1', y: 3, z: 2, a: 3},
                {x: '2011 Q2', y: 2, z: null, a: 1},
                {x: '2011 Q3', y: 0, z: 2, a: 4},
                {x: '2011 Q4', y: 2, z: 4, a: 3}
            ],
            xkey: 'x',
            ykeys: ['y', 'z', 'a'],
            labels: ['Y', 'Z', 'A'],
            stacked: true,
            barColors: $('#morris-stacked-bar-graph').data('colors').split(',')
        });
        $('ul.nav a').on('shown.bs.tab', function (e) {
            morris_bar.redraw();
            $('svg').css({ width: '100%' });
        });
    }

Answer 3

首先，您要检查是否使用了正确版本的morris.js，github上的当前主分支具有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（）函数。

我认为没有必要让它比这更加困难，你总是可以转换为coffeescript ofcourse，但这应该有效。

Answer 4

此代码对我有用，如果您在一个标签上有多个图表，请尝试使用它：

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
$.each(yourarray, function (index, value) {
                value.redraw();
            });
        });

Answer 5

我遇到了完全相同的问题，但就我而言，上述解决方案均无效。

对我有用的是使用 jquery ui标签代替（link）。这些工作就像一个魅力。

您的代码只需要轻微的重写。而不是

<!-- 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>

写：

    <!-- Nav tabs and Panes-->
<div id="tabs">
    <ul>
      <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>


      <div  id="home">...</div>
      <div  id="profile">
        <%= content_tag :div, "", id: "info_chart", data: { info: @chart_data } %>
      </div>
      <div id="messages">...</div>
      <div  id="settings">...</div>
 </div>

然后你只需添加这个脚本：

 <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

我希望这会有所帮助。

顺便说一下，我发现尝试捕捉事件'shown.bs.tab'的所有小提琴由于某种原因不再起作用。

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

5 个答案: