问题描述:

I am trying to show a chart inside of a modal.

I am using Meteor with the maazalik:highcharts package. Initially, when the modal appears the chart is outside of the modal. As soon as I resize the window, the chart appears correctly inside the modal.

A button click event triggers:

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

My modal sits in a template:

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

EDIT: I replaced my click event handler and it worked.

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

setTimeout(function(){

console.log("reflow");

$("#accountsDetails").highcharts().reflow();

},200);

网友答案:

add to your config object:

func: function(chart) {
            setTimeout(function() {
                chart.reflow();
            }, 0);
        }
相关阅读:
Top