chart.jsを使用して同じページに複数の反応チャートを表示

Question

同じページに4つのチャートを表示して、ページのサイズ変更時にサイズが変更されるようにする必要があります。私は

<script src="js/Chart.bundle.js"> </script> 
    <div id="container" style="width: 100%;text-align:center">  
    <table width="90%"> 
     <tr> 
      <td colspan="2" id="tdTitle" > 
       Title 
      </td> 
     </tr> 
     <tr> 
      <td id="tdLeftTop" width="50%" >     
       <canvas id="canvasLeftTop"></canvas> 

      </td> 
      <td id="tdRightTop" width="50%"> 
       <canvas id="canvasRightTop"></canvas> 
      </td> 
     </tr> 
      <tr> 
      <td id="tdLeftBottom" width="50%"> 
       <canvas id="canvasLeftBottom"></canvas> 
      </td> 
      <td id="tdRightBottom" width="50%"> 
       <canvas id="canvasRightBottom"></canvas> 
      </td> 
     </tr> 
    </table> 
    </div> 

を使用し、各キャンバスに私が応答オプションを使用してチャートを添付：真。しかし、結果は反応しません。私がテーブルの外でキャンバスを使用する場合、それは正しい方法で動作します。私に何ができる？

Answer 1

テーブルを使用せずにDIVを使用する必要があります。

各DIVにcanvasが含まれている応答2x2グリッドを使用した例です。使用されたCSSはanswerから取得され、2x2に変更されました。

<div class="w"> 
    <section> 
    <div> 
     <canvas id="canvasLeftTop"></canvas> 
    </div> 
    <div> 
     <canvas id="canvasRightTop"></canvas> 
    </div> 
    <div> 
     <canvas id="canvasLeftBottom"></canvas> 
    </div> 
    <div> 
     <canvas id="canvasRightBottom"></canvas> 
    </div> 
    </section> 
</div> 

とCSS：

html, body { 
    margin:0; 
} 
.w{ 
    overflow:hidden; 
} 
section div { 
    float: left; 
    height: 24vw; 
    margin: 1%; 
    width: 46%; 
    border-style: solid; 
    border-width: 1px; 
} 
section { 
    margin:-1%; 
    padding:20px; 
} 

注意、あなたはChart.jsチャートをインスタンス化したらsection divheightプロパティを削除します。グリッドが実際に動作することを示すために、この例では高さを単に追加しました。

ここに上記コードのworking exampleがあります。