Morris.js 그래프를 활성 탭 (부트 스트랩)에로드하십시오.

각각 1 개의 morris.js 그래프가있는 2 개의 탭이 있습니다. 첫 번째 (활성) 탭의 그래프는 완벽하게로드되지만 두 번째 탭의 그래프는로드되지 않습니다 (Chrome에서는 이상한 결과가 나타나고 Firefox에서는 아무 것도 표시되지 않음).Morris.js 그래프를 활성 탭 (부트 스트랩)에로드하십시오.

참조 jsbin :

<div class="row"> 
<ul class="nav nav-tabs nav-justified"> 
    <li ><a href="#a" data-toggle="tab">Tab A</a></li> 
    <li><a href="#b" data-toggle="tab">Tab B</a></li> 
</ul> 

<div class="tab-content col-sm-12" > 
    <div class="tab-pane active" id="a"> 
     <div id="tab-a" style="height:200px;width:200px;"></div> 
    </div> 
    <div class="tab-pane" id="b"> 
    <div id="tab-b" style="height:200px;width:200px;"></div> 
    </div> 
</div> 
    </div>

http://jsbin.com/canajije/1/edit 어떻게 정확하게 두 그래프를로드? http://www.doidea.se/blog/morris-js-charts-in-bootstrap-tabs

출처

2014-03-02 Citizen SP

당신은

shown.bs.tab

대한 추가 정보를 원하시면 여기 이벤트에서 그

redraw()

에 대한 지원을하고 morris.js의 마스터 분기를 사용하여 호출 할 필요가 또는 js-fiddle : http://jsfiddle.net/rbsthlm/vbfzr/

출처

2014-03-04 11:58:51 rbsthlm

는 두 탭이 활성화되어 있는지 확인 : 위의 솔루션 내 경우 없음에

$('.nav-tabs li a').last().tab('show'); 
$('.nav-tabs li a').first().tab('show');

출처

2015-10-19 20:30:32

코드를 더 잘 포맷해야합니다. 질문을 편집 할 때 코드를 강조 표시하고'{}'버튼을 눌러 코드의 형식을 지정하십시오. – BrokenBinary

일했다.

제게는 jquery UI 탭 (link)을 대신 사용했습니다. 이것들은 매력처럼 작동했습니다.

코드를 약간만 다시 작성하면됩니다.

나는 모든 이벤트를 잡으려고 노력했다는 것을 발견했습니다 'shown.bs.tab' 어떤 이유로 더 이상 작동하지 않습니다.

출처

2016-03-02 19:51:50

Morris.js 그래프를 활성 탭 (부트 스트랩)에로드하십시오.

답변

관련 문제