jquery 图表未显示在引导模式中

5us2dqdw 于 2023-02-03 发布在 jQuery

关注(0)|答案(3)|浏览(141)

我想在引导模式下显示一个图表。代码如下：但是它不工作，图表不显示。如何解决这个问题？

<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>

按钮类型="按钮"类="按钮-主要按钮-激活"数据-切换="模态"数据-目标="#我的模型"〉绘制

jquery

来源：https://stackoverflow.com/questions/20301740/chart-not-display-inside-a-bootstrap-modal

3条答案

按热度按时间

fruv7luv1#

你必须在显示complelete模态框后显示char
在bootstrap 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'
        }
      }
    });              
});

赞(0）回复(0）举报 2023-02-03

6psbrbz92#

尝试绘制图表后，模态如下：

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

赞(0）回复(0）举报 2023-02-03

emeijp433#

我知道这是一个过时的问题，但是我最近在使用react、react-bootstrap和chartjs时遇到了类似的问题-a在尝试在模态中呈现图表之前从未遇到过问题。如果您遇到类似的问题，并且正在使用react with bootstrap和react-bootstrap库，可以使用onEntered事件。对于我的场景，有条件地呈现图表，使用在调用isEntered的回调时更新的状态，很好地解决了这个问题。
如果一个代码片段可以帮助任何人，请lmk。
react-bootstrap组件库模态文档：https://react-bootstrap.github.io/components/modal/#api

赞(0）回复(0）举报 2023-02-03

我来回答

jquery 图表未显示在引导模式中

按钮类型="按钮"类="按钮-主要按钮-激活"数据-切换="模态"数据-目标="#我的模型"〉绘制

3条答案

相关问题

热门标签

最新问答