タブで応答するキャンバスJSチャートを作成するには？

Question

こんにちは私は2番目のタブでキャンバスのjs折れ線グラフを表示している2つのブートストラップタブがあります。責任を負うキャンバスのjsチャート自体に高さと幅が設定されるまで、チャートは画面全体をカバーしません。チャートは、チャートに高さと幅なしで表示行き方： -

タブのコード： -

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#s1" data-toggle="tab">Tab 1</a></li> 
     <li><a href="#s2" data-toggle="tab">Tab 2</a></li> 
    </ul> 

    <div class="panel panel-flat"> 
     <div class="panel-body"> 
      <div class="tab-content"> 
       <div class="tab-pane" id="s1"> 
        <div class="row"> 
         <div class="col-md-12"> 
          A table is shown in first tab 
         </div> 
        <div>      
       </div> 

       <div class="tab-pane" id="s2"> 
        <div class="row"> 
         <div class="col-md-12"> 
          <div id="chartContainer" style="height: 365px !important; width: 100% !important;"></div> 
         </div> 
        <div>      
       </div> 
      </div> 
     <div>      
    </div> 
    </div> 

チャートのためのjavascript： -

<script type="text/javascript"> 
window.onload = function() { 

    var chart = new CanvasJS.Chart("chartContainer", 
    { 

     title:{ 

     }, 
     animationEnabled: true, 
     axisX:{ 

      gridColor: "Silver", 
      tickColor: "silver", 
      interval: 1 

     },       
        toolTip:{ 
         shared:true 
        }, 
     theme: "theme2", 
     axisY: { 
      gridColor: "Silver", 
      tickColor: "silver" 
     }, 
     legend:{ 
      verticalAlign: "center", 
      horizontalAlign: "right" 
     }, 

     data: [ 
     {   
      type: "line", 
      markerType: "square", 
      color: "#F08080", 
      dataPoints: [ 
      { x: 1, y: 6.7 }, 
      { x: 2, y: 8.0 }, 
      { x: 3, y: 7.10 }, 
      { x: 4, y: 8.58 }, 
      { x: 5, y: 9.34 }, 
      { x: 6, y: 6.63 }, 
      { x: 7, y:7.47 }, 
      { x: 8, y: 8.53 }, 

      ] 
     } 
     ], 
     }); 

     chart.render(); 
     } 
    </script> 

をIグラフ自体の高さと幅を設定せずに誰かがチャートを全幅でタブに表示させるのを助けてくれたら大変感謝しています。どんな助けも高く評価されます。

Answer 1

CanvasJS Chartは、コンテナの寸法に従ってグラフの高さと幅を自動的に設定します。値がコンテナに設定されていない場合は、デフォルト値が使用されます。

ブートストラップでは、最初に2番目のタブが表示されないため、デフォルト値が使用されます。この問題を解決するには、shown.bs.tabイベントがブートストラップによって起動されたときに、2番目のグラフをレンダリングする必要があります。

$('#bs-tab2').on("shown.bs.tab",function(){ 
    chartTab2(); 
    $('#bs-tab2').off(); // to remove the binded event after the initial rendering 
}); 

これをチェックするjsfiddle