在同一頁面中使用chart.js顯示多個響應圖表

Question

我需要在同一頁面中顯示四個圖表，以便在頁面調整大小時它們將響應並更改其大小。我使用

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

對於每個畫布我附上一個圖表，其中包含選項respon：true。但結果並不敏感。如果我在桌子外面使用正確的方式使用畫布。我能做什麼？

Answer 1

您應該放棄使用表格並改用DIV。

下面是一個使用響應式2x2網格的示例，其中每個DIV包含您的canvas。使用的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。