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

在每个画布上，我都附有一个图表，其选项为response：true。 但是结果并不灵敏。 如果我在表外使用画布，则它的工作方式正确。 我能做什么？

Answer 1

您应该放弃使用表，而改用DIV。

这是一个使用自适应2x2网格的示例，其中每个DIV都包含您的canvas 。 使用的css取自此答案，并修改为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 div height属性。 在此示例中仅添加了高度，以显示实际的网格。

这是上述代码的一个有效示例 。