Twitter bootstrap Morris.js图表在引导选项卡内不工作

我有一种情况，我试图在两个不同的区域内使用MorrisJS图表。图表在第一个（默认）选项卡中加载良好，但当我点击第二个选项卡时，图表根本无法正常加载。这是非常奇怪的，因为我复制和粘贴完全相同的图表在第一个和第二个选项卡，但第二个没有加载给我

这里是一个指向JSFIDLE I设置的链接

代码如下：

HTML:

第一个图表如下所示：

第二个图表如下所示：

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

---

将Morris.Bar属性

resize

设置为true：

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({
元素：“图表1”，
数据：[
{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']，
标签：[“A系列”、“B系列”]，
藏身处：“永远”，
调整大小：true
});
var profileBar=Morris.Bar({
元素：“图表2”，
数据：[
{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']，
标签：[“A系列”、“B系列”]，
藏身处：“永远”，
调整大小：true
});
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
var target=$（e.target）.attr（“href”）//已激活选项卡
交换机（目标）{
案例“#家”：
homeBar.redraw（）；
$（window.trigger（'resize'）；
打破
案例“#简介”：
profileBar.redraw（）；
$（window.trigger（'resize'）；
打破
}
});







我遇到了同样的问题，最终解决了。只是想和大家分享。希望对你有帮助

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

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

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