モーダルのモーダルハイチャート

Question

私はモーダルの中にチャートを表示しようとしています。

私は、maazalik：highchartsパッケージでMeteorを使用しています。最初は、モーダルが表示されているとき、グラフはモーダルの外にあります。ウィンドウのサイズを変更すると、モーダル内にグラフが正しく表示されます。

ボタンのクリックイベントがトリガされます。

$('#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

あなたのconfigオブジェクトに追加します。

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