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

我在每个画布上附加了一个带有选项 responsive: 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 div height 属性。在这个例子中简单地添加了高度来显示网格的实际效果。

这是上面代码的working example。