将 2 个 chart.js 包含在一个 div 中答案

【问题标题】：keep 2 chart.js contained in a div将 2 个 chart.js 包含在一个 div 中
【发布时间】：2017-12-25 16:42:10
【问题描述】：

所以我试图在一个主 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 很陌生，所以我看到有错误，但我不知道如何修复它们。任何帮助将不胜感激！

谢谢

【问题讨论】：

标签： css html chart.js chart.js2

【解决方案1】：

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

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

另一种选择是使用 Bootstrap。

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

https://getbootstrap.com/

希望对你有帮助

【讨论】：