模态

Question

我试图在模态中显示图表。

我正在使用Meteoralik：highcharts包。最初，当模态出现时，图表位于模态之外。只要我调整窗口大小，图表就会在模态中正确显示。

按钮点击事件触发：

$('#accountsDetailsModal').modal('show');

我的模态位于模板中：

  <template name="AccountsGraph">  
   <div id="accountsDetailsModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close on-close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Accounts Details</h4>
                </div>
                <div class="modal-body">
                    <div id="container" style="width:100%;margin: 0 auto">
                       {{> highchartsHelper chartId="accountsDetails" chartWidth="100%" charHeight="100%" chartObject=accountsGraph}} 
                    </div> 
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default on-close" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div> 
</template>

编辑：我替换了我的点击事件处理程序并且它有效。

 $('#accountsDetailsModal').modal('show');
    setTimeout(function(){
        console.log("reflow");
        $("#accountsDetails").highcharts().reflow();
    },200);

Answer 1

添加到您的配置对象：

func: function(chart) {
            setTimeout(function() {
                chart.reflow();
            }, 0);
        }