試圖將morris.js圖表​​插入Bootstrap旋轉木馬

Question

我想將morris.js圖表​​插入旋轉木馬，它只適用於第一項與.active，或者如果我將.active添加到其他項目，但然後傳送帶停止加工。我甚至試過jQuery addClass和removeClass。

這裏是我的代碼：

<div class="item active"> 
    <div class=" first-slide box-body chart-responsive"> 
    <div class="chart" id="sales-chart" style="height: 300px; position: relative;"> 

    </div> 
    </div><!-- /.box-body --> 
</div> 
<!-- /.box --> 
<div class="item" id="graphElemnt"> 
    <div class=" second-slide box-body chart-responsive"> 
    <div class="chart" id="bar-chart" style="height: 300px;"> 
    </div> 
    </div> 
</div> 

<div class="item" id="graphElemnt"> 
    <div class=" third-slide box-body chart-responsive"> 
    <div class="chart" id="balanced" style="height: 300px; position: relative;"> 

    </div> 
    </div><!-- /.box-body --> 
</div> 

var donut = new Morris.Donut({ 
    element: 'sales-chart', 
    resize: true, 
    colors: ["#3c8dbc", "#f56954", "#00a65a"], 
    data: [ 
     {label: "huy", value: 12}, 
     {label: "In-Store Sales", value: 30}, 
     {label: "Mail-Order Sales", value: 20} 
    ], 
    hideHover: 'auto' 
}); 

Answer 1

檢查了這一點Fiddle

的問題是，當您嘗試初始化圖表，他們是隱藏的，他們容器大小與顯示時的大小不同，因此我們只能在第一次顯示時才初始化它們

$('#myCarousel').on('slid.bs.carousel', function (e) { 
    var chart= $(this).find('.item.active .chart'); 
    var id = chart.attr('id'); 
    if(chart.hasClass('loaded')){ 
    return true; 
    } 
    if(id == 'balanced'){ 
    var donut2 = new Morris.Donut({ 
     element: 'balanced', 
     resize: false, 
     colors: ["#3c8dbc", "#f56954", "#00a65a"], 
     data: [ 
      {label: "Pizda", value: 30}, 
      {label: "Mudak", value: 12}, 
      {label: "Mail-Order Sales", value: 20} 
     ] 
    }); 
    } else if (id = 'bar-chart'){ 
    var bar = new Morris.Bar({ 
     element: 'bar-chart', 
     resize: false, 
     data: [ 
      {y: '2006', a: 100, b: 90}, 
      {y: '2007', a: 75, b: 65}, 
      {y: '2008', a: 50, b: 40}, 
      {y: '2009', a: 75, b: 65}, 
      {y: '2010', a: 50, b: 40}, 
      {y: '2011', a: 75, b: 65}, 
      {y: '2012', a: 100, b: 90} 
     ], 
     barColors: ['#00a65a', '#f56954'], 
     xkey: 'y', 
     ykeys: ['a', 'b'], 
     labels: ['CPU', 'DISK'], 
     hideHover: 'auto' }); 
    } 
    chart.addClass('loaded'); 
}); 

代碼從W3Schools