Ich versuche, morris.js Diagramm in Bootstrap Karussell

Question

Ich versuche, morris.js Diagramme in ein Karussell einzufügen, und es funktioniert nur für das erste Element mit .active, oder wenn ich .active zu anderen Elementen hinzufügen, aber dann stoppt Karussell Arbeiten. Ich habe sogar versucht, jQuery addClass und removeClass.

ist hier mein Code:

<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

Check this out Fiddle

Das Problem, dass, wenn Sie versuchen, die Charts zu init, sie versteckt sind und sie Die Größe des Containers unterscheidet sich von der angezeigten Größe, daher können wir sie nur initialisieren, wenn sie zum ersten Mal angezeigt werden

$('#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'); 
}); 

-Code von W3Schools