Javascript Morris Donut-选择其他选项卡并调整大小时抛出矩阵错误

我遇到了一个非常虚幻的问题

我有两个标签：“仪表板”，“编辑应用程序”

在“仪表板”中，我有一个莫里斯甜甜圈图表

在“编辑应用程序”中根本没有莫里斯图表

问题是，当我选择“编辑应用程序”并调整窗口大小时， 我得到以下错误：

错误：属性转换：预期数，“矩阵（NaN，NaN，NaN，NaN，…”

我尝试输入resizeHandler，但仍然没有任何帮助

这是我的密码： HTML: JS:

$（文档）.ready（函数（）{
//单击其他选项卡时，当前选项卡将处于非活动状态，新选项卡将处于活动状态
$（'.nav a'）。单击（函数（）{
$（'.nav li'）.removeClass（'active'）；
});
var morrisDonutDataRegion=[{
标签：“美国”，
价值：18
}, {
标签：“拉丁语”，
价值：20
}, {
标签：“欧洲、中东和非洲”，
数值：32
}];
莫里斯，甜甜圈({
调整大小：对，
元素：“morrisDonutRegion”，
数据来源：morrisDonutDataRegion，
颜色：['#0088cc'、'#734ba9'、'#E36159']
});
Morris.Donut.prototype.resizeHandler=函数（）{
this.timeoutId=null；
如果（this.el&&this.el.width（）>0&&this.el.height（）>0）{
this.raphael.setSize（this.el.width（），this.el.height（））；
返回这个.redraw（）；
}
否则返回null；
};
Morris.Donut.prototype.setData=函数（数据）{
var行；
这个数据=数据；
this.values=（函数（）{
变量i，len，ref，结果；
_ref=该数据；
_结果=[]；
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
行=_ref[_i]；
_push（parseFloat（row.value））；
}
返回结果；
}).打电话（这个）；
如果（this.el&&this.el.width（）>0&&this.el.height（）>0）{
返回这个.redraw（）；
}
否则返回null；
};
//激活列表1的可嵌套项
$（'#nestable'）。nestable（）
var nestablecount=4；
$（“#添加新应用类别”）。单击（函数（）{
$（'ol.outer'）.append（'li class=“dd item”data id=“'+nestablecount+”>item'+nestablecount+''）；
nestablecount++；
});
});

我在以下链接中有一个JSFIDLE：

但我还是会犯错误：

如何解决这个问题

谢谢

<nav>
  <div class="tabbable edit-app-tabs">
     <!-- Application Navigation Bar Tabs -->
     <ul class="nav nav-tabs nav-tabs-colors col-md-offset-1">
       <li role="presentation" class="active">
          <a href="#dashboard-tab" data-toggle="tab" 
             id="dashboard-link">Dashboard</a>
       </li>
       <li role="presentation">
          <a href="#edit-app-tab" data-toggle="tab">
           Edit App</a>
       </li>
     </ul>

     <!-- Application Tab Content Container-->
     <div class="tab-content">    

        <!-- Application Dashboard Tab content-->
        <div id="dashboard-tab" class="tab-pane fade in active">
          <div class="row">
               <section class="panel panel-featured-left panel-featured-primary">
                  <div class="panel-body">
                      <div class="chart chart-md" id="morrisDonutRegion"></div>
                  </div>
               </section>
          </div>
        </div>

        <!-- Application Edit App Tab content-->    
        <div id="edit-app-tab" class="tab-pane fade">
             <section class="panel panel-margin-settings" id="first-component">
                <header class="panel-heading">
                   <h2 class="panel-title">Privacy Statement</h2>
                </header>
                <div class="panel-body reset-padding-top" id="tools-block">
                    <p class="col-md-10 col-lg-10" style="padding:0;">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit tellus,                         feugiat a dolor at, accumsan volutpat dolor. Fusce vitae lacus convallis,                           venenatis orci eu, suscipit mauris. Duis vitae velit id nunc commodo iaculis.                     </p>
                </div>
             </section>  

             <section class="panel panel-margin-settings" 
                id="first-component">
                <header class="panel-heading">
                   <h2 class="panel-title">Platform</h2>
                </header>

                <div class="panel-body">
                   <div class="checkbox-custom checkbox-default 
                               checkbox-inline">
                     <input type="checkbox" checked="" id="checkboxiPad">
                     <label for="checkboxiPad">iPad</label>
                   </div>
                   <div class="checkbox-custom checkbox-default 
                               checkbox-inline">
                     <input type="checkbox" checked="" id="checkboxPC">
                     <label for="checkboxPC">PC</label>
                   </div>
                </div>
             </section>

              <section class="panel panel-margin-settings" 
                       id="first-component">
                  <header class="panel-heading">
                     <h2 class="panel-title">App Categories</h2>
                  </header>

                  <a class="new-category" id="add-new-app-category">
                    + New Category</a>

                    <div class="panel-body">
                       <div class="dd" id="nestable">
                           <ol class="dd-list outer">
                               <li class="dd-item" data-id="1">
                                   <div class="dd-handle">Item 1</div>
                               </li>
                               <li class="dd-item" data-id="2">
                                   <div class="dd-handle">Item 2</div>
                               </li>
                               <li class="dd-item" data-id="3">
                                   <div class="dd-handle">Item 3</div>
                               </li>
                           </ol>
                       </div>
                    </div>
              </section>
        </div>
     </div>
  </div>
</nav>

.nav-tabs-colors {
    background-color: #ececef;
}

.edit-app-tabs {
    background-color:#ececef;
}

#first-component {
    margin-top:33px;
}


.panel {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
/*    border-radius: 4px;*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/*    overflow-y: auto;*/
    /*width:431px;*/
    /*width:402px;*/
}

.panel-margin-settings {
    margin-left:20px;
    margin-bottom:15px;
}





.panel-heading {
    background: #fdfdfd;
/*    border-radius: 5px 5px 0 0;*/
/*    border-bottom: 1px solid #DADADA;*/
/*    padding: 18px;*/
    position: relative;
}


.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    color: #2baab1;
    font-family:'Lato', sans-serif;
    display:inline-block;
}

.panel-heading + .panel-body {
/*    border-radius: 0 0 5px 5px;*/

}
.panel-body {
    background: #fdfdfd;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/*    border-radius: 5px;*/
}
.panel-body {
    padding: 15px;
}


.reset-padding-top {
    padding-top: 0;
}

$(document).ready(function () {

    // When clicking on other tab, the current will be deactive and the new one will be active
    $('.nav a').click(function () {
         $('.nav li').removeClass('active');
    });

        var morrisDonutDataRegion = [{
        label: "US",
        value: 18
    }, {
        label: "LATIN",
        value: 20
    }, {
        label: "EMEA",
        value: 32
    }];


    Morris.Donut({
        resize: true,
        element: 'morrisDonutRegion',
        data: morrisDonutDataRegion,
        colors: ['#0088cc', '#734ba9', '#E36159']
    });

        Morris.Donut.prototype.resizeHandler = function () {
        this.timeoutId = null;
        if (this.el && this.el.width() > 0 && this.el.height() > 0) {
            this.raphael.setSize(this.el.width(), this.el.height());
            return this.redraw();
        }
        else return null;
    };
    Morris.Donut.prototype.setData = function (data) {
        var row;
        this.data = data;
        this.values = (function () {
            var _i, _len, _ref, _results;
            _ref = this.data;
            _results = [];
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                row = _ref[_i];
                _results.push(parseFloat(row.value));
            }
            return _results;
        }).call(this);
        if (this.el && this.el.width() > 0 && this.el.height() > 0) {
            return this.redraw();
        }
        else return null;
    };


     // activate Nestable for list 1
            $('#nestable').nestable()

            var nestablecount = 4;
            $('#add-new-app-category').click(function () {
                $('ol.outer').append('<li class="dd-item" data-id="' + nestablecount + '"><div class="dd-handle">Item ' + nestablecount + '</div></li>');
                nestablecount++;
            });



});