[英]chart not display inside a bootstrap-modal
I want to show a chart in a bootstrap modal.我想在引导模式中显示图表。 Codes here: but it doesn't work, chart not display.
代码在这里:但它不起作用,图表不显示。 How to fix that?
如何解决?
<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">Draw #button type="button" class="btn btn-primary btn-lg active" data-toggle="modal" data-target="#myModel">绘制
you must show char after showing compelete modal box 你必须在显示complete模式框后显示char
In bootstrap 3 : 在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'
}
}
});
});
try draw chart after modal like this: 尝试在模态之后绘制图表,如下所示:
$('#myModal').modal();
// and then
$('#myModal').on('shown.bs.modal', function (e) {
plot1.replot();
//...
I know this is a very dated question, however I ran into a similar issue recently using react, react-bootstrap and chartjs - never had an issue until attempting to render a chart within a modal.我知道这是一个非常过时的问题,但是我最近使用 react、react-bootstrap 和 chartjs 遇到了类似的问题——在尝试在模态中呈现图表之前从来没有遇到过问题。 If you're having a similar issue and are using react with bootstrap and the react-bootstrap library, there is an
onEntered
event one can use.如果您遇到类似的问题并且正在使用 react with bootstrap 和 react-bootstrap 库,则可以使用一个
onEntered
事件。 For my scenario, conditionally rendering the chart, using state that is updated when the callback for isEntered
is invoked, solved the problem nicely.对于我的场景,使用在调用
isEntered
的回调时更新的 state 有条件地呈现图表,很好地解决了问题。
If a code snippet would help anyone, please lmk.如果代码片段对任何人有帮助,请 lmk。
Docs for react-bootstrap component library modal: https://react-bootstrap.github.io/components/modal/#api react-bootstrap 组件库模态文档: https://react-bootstrap.github.io/components/modal/#api
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.