Morris.js 图表在 bootstrap 选项卡中不起作用

Question

我有一种情况，我试图在两个不同的 bootstrap tabs 中使用 MorrisJS 图表。图表在第一个（默认）选项卡中加载正常，但当我单击第二个选项卡时，图表根本无法正确加载。这很奇怪，因为我将完全相同的图表复制并粘贴到第一个和第二个选项卡中，但我没有加载第二个图表。

这是我设置的 jsfiddle link。 https://jsfiddle.net/phz0e68d/5/

代码如下：

HTML:

<div>   
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div class="row">
                <div class="col-md-12">
                    <div id="chart1" style="height: 200px;"></div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <div class="row">
                <div class="col-md-12">
                    <div id="chart2" style="height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript:

Morris.Bar({
  element: 'chart1',
  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 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  hideHover: 'always'
});

Morris.Bar({
  element: 'chart2',
  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 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  hideHover: 'always'
});

第一个图表如下所示：

第二张图表如下所示：

如您所见，第二张图表根本没有正确加载。控制台中出现关于负宽度的错误，但我不确定这是怎么可能的。

Answer 1

将 Morris.Bar 属性 resize 设置为真：

resize: true

将您的 Morris.Bar 分配给一个变量：

var homeBar = Morris.Bar({...});
var profileBar = Morris.Bar({...});

添加一个在选项卡更改时触发的事件，该事件会重绘条形图并触发调整大小：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var target = $(e.target).attr("href") // activated tab

  switch (target) {
    case "#home":
      homeBar.redraw();
      $(window).trigger('resize');
      break;
    case "#profile":
      profileBar.redraw();
      $(window).trigger('resize');
      break;
  }
});

请参阅下面的完整工作代码段：

var homeBar = Morris.Bar({
  element: 'chart1',
  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 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  hideHover: 'always',
  resize: true
});

var profileBar = Morris.Bar({
  element: 'chart2',
  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 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  hideHover: 'always',
  resize: true
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var target = $(e.target).attr("href") // activated tab

  switch (target) {
    case "#home":
      homeBar.redraw();
      $(window).trigger('resize');
      break;
    case "#profile":
      profileBar.redraw();
      $(window).trigger('resize');
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    <div class="row">
      <div class="col-md-12">
        <div id="chart1" style="height: 200px;"></div>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <div class="row">
      <div class="col-md-12">
        <div id="chart2" style="height: 200px;"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

我遇到了同样的问题，终于解决了。只是想分享。希望对你有帮助！.

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = $(e.target).attr("href") // activated tab

    switch (target) {

      case "#bootstrap_tab_id": // bootstrap tab id

      $("#morris_chart").empty(); // destroy chart

      bar =  Morris.Donut({        // set chart
        element: 'morris_chart',
        resize: true,

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

        bar.redraw();
        $(window).trigger('resize');
        break;
      default:
      $("#morris_chart").empty();

       break;
    }
  });

Morris.js 图表在 bootstrap 选项卡中不起作用

Morris.js chart not working inside of a bootstrap tab

twitter-bootstrap

morris.js

bootstrap-tabs