chart.js - 半圆环图和容器 div 之间的差距

Question

我正在尝试使用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

Answer 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>