Morris.js 도넛 레이블 중앙 jquery 탭에 없음

Question

Morris.js에 새로운 문제가 있습니다. 나는 현재 탭을 클릭하여 그래프를 다시 그리기 위해 다시 그리기 기능을 사용하여 올바르게 표시합니다. 문제는 도넛 형 그래프로이 작업을 수행 할 때 그래프를 다시 그릴 때 중심 레이블 위치가 잘못 계산된다는 것입니다. 섹션 위로 마우스를 이동하면 탭에서 다시 작동합니다. 탭에서 나와서 다시 돌아 오면 괜찮습니다. 중앙 텍스트가 처음으로로드됩니다. 나는 Morris의 redraw()가 텍스트를 덮지 않는다고 가정합니다. 이 문제를 해결하는 방법을 모릅니다.

<div id="tabs2"> 
<div id="tabs-1" class="statdiv"> 
     <h4>Tab 1</h4> 

    <div class="statgrid"> 
     <div class="col-2-6"> 
      <div id="morris-donut-chart"></div> 
     </div> 
    </div> 
    <div class="statgrid"> 
     <div class="col-4-6"> 
      <div class="col-5-6">Item 1</div> 
      <div class="col-1-6">&pound;10.00</div> 
     </div> 
    </div> 
</div> 
<div id="tabs-2" class="statdiv"> 
     <h4>Tab 2</h4> 

    <div class="statgrid"> 
     <div class="col-2-6"> 
      <div id="morris-donut-chart2"></div> 
     </div> 
    </div> 
    <div class="statgrid"> 
     <div class="col-4-6"> 
      <div class="col-5-6">Item 2</div> 
      <div class="col-1-6">&pound;10.00</div> 
     </div> 
    </div> 
</div> 
<div id="tabs-3" class="statdiv"> 
     <h4>Tab 3</h4> 

    <div class="statgrid"> 
     <div class="col-2-6"> 
      <div id="morris-donut-chart3"></div> 
     </div> 
    </div> 
    <div class="statgrid"> 
     <div class="col-4-6"> 
      <div class="col-5-6">Item 3</div> 
      <div class="col-1-6">&pound;10.00</div> 
     </div> 
    </div> 
</div> 
<div id="tabs-4" class="statdiv"> 
     <h4>Tab 4</h4> 

    <div class="statgrid"> 
     <div class="col-2-6"> 
      <div id="morris-donut-chart4"></div> 
     </div> 
    </div> 
    <div class="statgrid"> 
     <div class="col-4-6"> 
      <div class="col-5-6">Item 4</div> 
      <div class="col-1-6">&pound;10.00</div> 
     </div> 
    </div> 
</div> 
<div id="tabcontain3"> 
    <ul class="mytabs2"> 
     <li class="stattab1"><a href="#tabs-1" data-toggle="tab" data-identifier="donut1">Tab 1</a> 
     </li> 
     <li class="stattab2"><a href="#tabs-2" data-toggle="tab" data-identifier="donut2">Tab 2</a> 
     </li> 
     <li class="stattab3"><a href="#tabs-3" data-toggle="tab" data-identifier="donut3">Tab 3</a> 
     </li> 
     <li class="stattab4"><a href="#tabs-4" data-toggle="tab" data-identifier="donut4">Tab 4</a> 
     </li> 
    </ul> 
</div> 

JS :

$(function() { 
    $("#tabs2").tabs(); 
}); 

$('ul.mytabs 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()"); 
    }) 
}); 

$(function() { 

    var donut1_data = [{ 

     label: "Download Sales", 
     value: 12 
    }, { 
     label: "In-Store Sales", 
     value: 30 
    }, { 
     label: "Mail-Order Sales", 
     value: 20 
    }]; 

    var donut1 = { 
     element: 'morris-donut-chart', 
     data: donut1_data, 
     resize: false 
    } 

    donut1 = Morris.Donut(donut1) 



    var donut2_data = [{ 

     label: "Download Sales", 
     value: 10 
    }, { 
     label: "In-Store Sales", 
     value: 30 
    }, { 
     label: "Mail-Order Sales", 
     value: 20 
    }]; 

    var donut2 = { 
     element: 'morris-donut-chart2', 
     data: donut2_data, 
     resize: false 
    } 

    donut2 = Morris.Donut(donut2) 



    var donut3_data = [{ 

     label: "Download Sales", 
     value: 8 
    }, { 
     label: "In-Store Sales", 
     value: 30 
    }, { 
     label: "Mail-Order Sales", 
     value: 20 
    }]; 

    var donut3 = { 
     element: 'morris-donut-chart3', 
     data: donut3_data, 
     resize: false 
    } 

    donut3 = Morris.Donut(donut3) 


    var donut4_data = [{ 

     label: "Download Sales", 
     value: 2 
    }, { 
     label: "In-Store Sales", 
     value: 30 
    }, { 
     label: "Mail-Order Sales", 
     value: 20 
    }]; 

    var donut4 = { 
     element: 'morris-donut-chart4', 
     data: donut4_data, 
     resize: false 
    } 

    donut4 = Morris.Donut(donut4) 



}); 

CSS :

#morris-donut-chart svg, #morris-donut-chart2 svg, #morris-donut-chart3 svg, #morris-donut-chart4 svg { 
width:250px; 
height:250px; 
} 
#morris-donut-chart, #morris-donut-chart2, #morris-donut-chart3, #morris-donut-chart4 { 
width:250px; 
height:250px; 
} 

,174 여기

는 jsfiddle에게 http://jsfiddle.net/d1owfmoc/1/

HTML이고

Answer 1

우선 mytabs 클래스가 없으므로 mytabs2을 jquery 코드로 대체해야합니다.

그 후에 에서 click으로 변경하면 탭이 clicked 일 때 도넛을 다시 그리기를 원하기 때문입니다. DEMO