Morris JS Chart Not Loading in Twitter Bootstrap選項卡窗格

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

首先，您要檢查您使用的是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（）函數。

我認爲沒有必要讓它變得比這個更有價值，你總是可以轉換成咖啡文本，但是這應該起作用。

Answer 2

找到了解決我的情況的一個圖表上，這不是正確顯示選項卡：

保存圖形爲一個變量：

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

然後偵聽標籤的變化，重繪圖：

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

我希望這可以幫助別人。

Answer 3

此代碼爲我工作，試試吧，如果你有一個標籤在多個圖表：

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

Answer 4

我有完全相同的問題，但在我的上述解決方案的情況下，沒有工作。

什麼工作對我來說是使用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'由於某種原因不再工作的所有小提琴。

Answer 5

最常見的答案是部分正確的。但問題是，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%' }); 
     }); 
    }