试图将 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的代码