模态内的高图web图表

Question

我想在部件bootstrap模式上显示highcharts web chart，我也想要一个动态大小以及bootstrap模式。

到目前为止我尝试的是：

HTML code：

<td><a href="#">${ studentInfo.name }</a></td>

模态：

<div class="container">
     <div id="studentProfile" class="modal container hide fade in" tabindex="-1">
     ...
     <div class="modal-body">
         <div class="row-fluid">
              <div class="span6">...</div>
              <div class="span6">
                  // chart
                  <div class="span6">
                      <div class="span6">
                      <div id="chart-web" class="span6"></div>
                      </div>
                  </div>

              </div>
         </div>
     </div>
</div>

JS代码：

$( function() {

    var $modal = $('#studentProfile');

    $('.profiler').on( 'click', function() {
         $.post('../admin/student_stats.do', 
                 { name : $(this).text() }, function( data ) {

                     console.log( data );
                     console.log( data['studentBean'].myName );
                     $modal.modal();

                 },'json')

            .fail( function () {
                bootbox.alert('Internal Error, please try again.');
            });
    });
});

图表代码：

$(function () {
    $('#chart-web').highcharts({
          ...
    });
});

结果： 在初始抽奖时，它完全正常，但

当我调整浏览器大小时

它弄乱了图表。此外，当我再次最大化浏览器时，图表仍然保持如下图所示。有办法解决这个问题吗？

如果我的问题不明确，请发表评论，我会做出相应的回复。

更新：fiddle

Answer 1

你有太多嵌套class="span6"你需要减少它们

<!-- Right side -->
<div class="span6">
    <!-- Graphical view of weakness -->
    <div id="chart-web"></div>
</div>

将您的问题代码更改为以上代码

Updated Demo click here