图表不显示在引导模式内答案

【问题标题】：chart not display inside a bootstrap-modal图表不显示在引导模式内
【发布时间】：2013-12-16 14:14:42
【问题描述】：

我想在引导模式中显示图表。这里的代码：但它不起作用，图表不显示。如何解决？

<div id="myModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div id="chart1" style="height:300px; width:600px;"></div>

</div><!-- /.modal -->

<script class="code" type="text/javascript">
$(document).ready(function(){
  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84];
  var plot1 = $.jqplot('chart1', [line1], {
      title:'Data Point Highlighting',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            formatString:'%b&nbsp;%#d'
          } 
        },
        yaxis:{
          tickOptions:{
            formatString:'$%.2f'
            }
        }
  });
  $('#myModal').bind('shown',function() {
    plot1.replot();
  });
});
</script>

#button type="button" class="btn btn-primary btn-lg active" data-toggle="modal" data-target="#myModel">绘制

【问题讨论】：

你能把它添加到一个 JS fiddle 中以便我可以改变它吗？

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

显示完整的模态框后必须显示字符

在引导程序 3 中：

$('#myModal').on('shown.bs.modal', function (e) {
  var plot1 = $.jqplot('chart1', [line1], {
    title:'Data Point Highlighting',
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{
          formatString:'%b&nbsp;%#d'
        } 
      },
      yaxis:{
        tickOptions:{
          formatString:'$%.2f'
        }
      }
    });              
});

【讨论】：

【解决方案2】：

尝试像这样在模态之后绘制图表：

$('#myModal').modal();
// and then
$('#myModal').on('shown.bs.modal', function (e) {
  plot1.replot();
  //...

【讨论】：