我想在bootstrap模式中显示图表。代码在这里: 但它不起作用,图表不显示。如何解决?
<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 %#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”&gt; Draw
答案 0 :(得分:7)
显示完成模式框后必须显示字符
在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 %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
});
});
答案 1 :(得分:2)
尝试在模态之后绘制图表,如下所示:
$('#myModal').modal();
// and then
$('#myModal').on('shown.bs.modal', function (e) {
plot1.replot();
//...