如何将 Donut Chart JS 放入 Bootstrap 列？答案

【问题标题】：How to fit Doughnut Chart JS into Bootstrap column?如何将 Donut Chart JS 放入 Bootstrap 列？
【发布时间】：2018-01-11 22:09:03
【问题描述】：

我希望 Chart.js 中的甜甜圈图形适合我的引导列。我也希望这个专栏有具体的尺寸（其实我更关心高度）。问题是画布 div 的大小实际上比我的列 div 大，并且所有图表都相互重叠。理想情况下，我希望所有 4 个图表都对齐到行的右侧，并且从右侧留出一点空间（例如 10 像素的一些边距）。

我尝试在列 div 和画布上使用边距/填充设置。想不通...

这里是jsfiddle 示例

我的 HTML：

<div class="row">
  <div class="col-sm-3">
    Some content
  </div>
  <div class="col-sm-3">
    Some other content
  </div>

  <div class="col-sm-2"></div>

  <div class="col-sm-1">
    <div class="chart-container" style="position: relative; width: 200px; height: 100px;">
      <canvas id="chart1" width="200" height="100"></canvas>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="chart-container" style="position: relative; width: 200px; height: 100px;">
      <canvas id="chart2" width="200" height="100"></canvas>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="chart-container" style="position: relative; width: 200px; height: 100px;">
      <canvas id="chart3" width="200" height="100"></canvas>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="chart-container" style="position: relative; width: 200px; height: 100px;">
      <canvas id="chart4" width="200" height="100"></canvas>
    </div>
  </div>
</div>

还有我的 JS：

var myNewChart;
var data = [{
  value: 30,
  color: "#F7464A"
}, {
  value: 50,
  color: "#E2EAE9"
}, {
  value: 100,
  color: "#D4CCC5"
}, {
  value: 40,
  color: "#949FB1"
}, {
  value: 100,
  color: "#4D5360"
}];

var options = {
  animation: true,
  animationEasing: 'easeInOutQuart',
  animationSteps: 80
};

//Get the context of the canvas element we want to select
var ctx1 = document.getElementById("chart1")
  .getContext("2d");
var ctx2 = document.getElementById("chart2")
  .getContext("2d");
var ctx3 = document.getElementById("chart3")
  .getContext("2d");
var ctx4 = document.getElementById("chart4")
  .getContext("2d");

/*******************************************************/
myNewChart1 = new Chart(ctx1).Doughnut(data, options);
myNewChart2 = new Chart(ctx2).Doughnut(data, options);
myNewChart3 = new Chart(ctx3).Doughnut(data, options);
myNewChart4 = new Chart(ctx4).Doughnut(data, options);

【问题讨论】：

标签： html css twitter-bootstrap chart.js chart.js2

【解决方案1】：

您可以添加一些 CSS 以正确设置 Chart.js canvas 和 div 容器的样式：

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

div.chart-container {
  padding: 1px;
}

检查这个小提琴更新：http://jsfiddle.net/beaver71/ht7uevay/

【讨论】：