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>

和每个画布我附上一个图表，选项响应：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。

使用chart.js在同一页面中显示多个响应式图表

1 个答案: