半圆环图和容器 div 之间的差距答案

【问题标题】：gap between half doughnut chart and container div半圆环图和容器 div 之间的差距
【发布时间】：2020-12-21 16:40:02
【问题描述】：

我正在尝试使用 chart.js 构建一个圆环图，但图表容器比图表画布大，并且围绕它进行设计变得更加困难......

是否有任何选项可以使图表和容器具有相同的高度和宽度？

设置：

var option = {
   rotation: 1 * Math.PI,
    circumference: 1 * Math.PI,
  responsive: true,
  aspectRatio:2,
   title: { display: false },
  legend: { display: false },
  scales: {
    xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false,
            },
            ticks: {
              display: false,
            },
          },
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false,
            },
            ticks: {
              display: false,
            },
          },
        ],
  }
};

代码笔： https://codepen.io/ronmara/pen/vYGeJyo

你可以看到div的左、右、下边框之间有一点空隙。

【问题讨论】：

标签： chart.js

【解决方案1】：

这是一个有点老套的解决方案，但将 layout.padding 设置为 -10 更适合您的容器中的甜甜圈：

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [
    {
      label: "Dataset #1",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [65, 59, 20, 81, 56, 55, 40]
    }
  ]
};

var option = {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  responsive: true,
  aspectRatio: 2,
  title: { display: false },
  legend: { display: false },
  layout: {
    padding: -10
  },
  scales: {
    xAxes: [
      {
        gridLines: {
          drawBorder: false,
          display: false
        },
        ticks: {
          display: false
        }
      }
    ],
    yAxes: [
      {
        gridLines: {
          drawBorder: false,
          display: false
        },
        ticks: {
          display: false
        }
      }
    ]
  }
};

Chart.Doughnut("chart_0", {
  options: option,
  data: data
});

body {  
  background: white;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<div class="chart-container" style="position: relative; height:16vh; width:32vh">
<canvas id="chart_0"></canvas>
</div>

【讨论】：

【解决方案2】：

我通过删除内联样式并将它们添加到附加到 div 的类中来使其居中。

我还将 layout.padding 添加到您的选项中。

layout: {
  padding: {
   left: 0,
   top: 10,
   right: 10,
   bottom: 0
}},

添加 codepen 以供参考。 https://codepen.io/robert9111/pen/abNVxWY

【讨论】：