Javascript Morris JS图表未在Twitter引导选项卡窗格中加载

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

这篇文章似乎讨论了这个问题：

我如何将他们的解决方案转换为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>

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

---

首先，您需要检查您是否使用了正确版本的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，但这应该会起作用。

找到了一个解决方案，解决了选项卡上单个图表无法正确显示的问题：

将图形另存为变量：

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

然后侦听选项卡上的更改，并重新绘制图表：

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

---

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

此代码对我有效，如果您在一个选项卡上有多个图表，请尝试：

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

---

我遇到了完全相同的问题，但在我的情况下，上述解决方案都不起作用

对我有效的方法是使用jqueryui选项卡。这些很有魅力

您的代码只需要稍微重新编写。而不是

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

$（函数（）{
$（“#制表符”）.tabs（）；
});

我希望这有帮助

---

顺便说一句，我发现所有试图捕捉事件

'show.bs.tab'

的小提琴由于某种原因不再起作用

上面的答案部分正确。但是，问题是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%' });
        });
    }

---

控制台中有错误吗？您看到页面源代码中的图表svg标记了吗？我将gem文件中的“gem'morrisjs rails”行更改为“gem'morrisjs rails”，git:“”以及您的代码。一个图表与以前一样在第一个选项卡中工作，但其他选项卡中没有显示任何图表。gem使用morris的生产实例，0.4.3与开发人员网站上的相同，您需要从github下载主版本：当前为0.5.0。情况如何？如果我下载它，我应该把它放在我的Rails应用程序中的什么地方？你可以把它放在你的assets/js文件夹中，在application.js文件中，你可以简单地引用你的文件：//=require Morris我认为我在Slick carousel中的Morris图表也有同样的问题。我很确定你的修正是有道理的。这里，什么是“show.bs.tab”？那不是选择器吗@这些都是引导js事件。在文档中：“此事件在显示选项卡后在选项卡显示时激发”-您可以在事件处理程序中创建图表，而不是重新绘制它（如果不显示，则无需创建）。您还可以使用jQuery的

one

而不是

上的
，这样图表只绘制一次，在下一个选项卡切换时可以工作。虽然这在某种程度上可以工作，但它仍然会将图表从页面上截去一半！这实际上只对我起了部分作用，我还必须将svg{width:100%！important；}添加到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%' });
        });
    }