Question

所以我试图在一个主div中包含2个chart.js，其位置为：relative。不知何故，如果我没有正确设置vw或vh，它们将在容器之外。反正是为了防止这种情况？

这是代码：

var ctx = document.getElementById('example1').getContext('2d');
var myLineChart = new Chart(ctx, {
  "type": "bar",
  "data": {
    "labels": ["some", "thing", "came", "up", "today"],
    "datasets": [{
      "label": "abs_base_notional",
      "data": [10.106688, 24.342801, 25.908431, 98.147767, 94.194484],
      "backgroundColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"],
      "borderColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"]
    }]
  },
  "options": {
    "title": {
      "text": "test in (M$)",
      "display": true
    },
    "legend": {
      "display": false
    },
    "scales": {
      "xAxes": [],
      "yAxes": []
    }
  }
})

var ctx = document.getElementById('example2').getContext('2d');
var myLineChart = new Chart(ctx, {
  "type": "bar",
  "data": {
    "labels": ["some", "thing", "came", "up", "today"],
    "datasets": [{
      "label": "base_notional",
      "data": [-4.95651, 13.800001, -0.404782, 98.147767, -2.787737],
      "backgroundColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"],
      "borderColor": ["#4f5643", "#DAA276", "#6a7587", "#5FA4EC", "#8CB277"]
    }]
  },
  "options": {
    "title": {
      "text": "second test (M$)",
      "display": true
    },
    "legend": {
      "display": false
    },
    "scales": {
      "xAxes": [],
      "yAxes": []
    }
  }
})

.row {
  text-align: center;
  margin: auto;
  width: 90%;
  height: 90%;
  border-size: 2px;
  border-style: solid;
  border-color: black;
}

.chart-container-double {
  display: inline-block;
  position: relative;
  margin: auto;
  height: 20vh;
  width: 40vw;
  border-size: 2px;
  border-style: solid;
  border-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="row">
  <div class="chart-container-double">
    <canvas id="example1"></canvas>
  </div>

  <div class="chart-container-double">
    <canvas id="example2"></canvas>
  </div>
</div>

另外，我对html / css / js很新，所以我看到有错误，但我不知道如何修复它们。任何帮助将不胜感激！

感谢

Answer 1

你应该了解flex-box。灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

你可以从这里开始：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

另一种选择是使用Bootstrap。

Bootstrap包含一个功能强大的移动优先灵活盒网格系统，用于构建各种形状和大小的布局。它基于12列布局，并具有多个层，每个层对应一个媒体查询范围。您可以将它与Sass mixins或我们预定义的类一起使用。

https://getbootstrap.com/

希望这会有所帮助

保留包含在div

1 个答案: