javascript - 模态内的 highcharts web 图表

Question

我想在部分 Bootstrap 模态上显示 highcharts web 图表，我还想在 Bootstrap 模态中显示动态大小。

到目前为止我尝试的是:

HTML代码:

<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