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的左，右和下边框之间有一点缝隙。

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>

Answer 2

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

我还在您的选项中添加了layout.padding。

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

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

半甜甜圈图与容器div之间的差距

2 个答案: