Question

这是我第一次使用Chart.js，除了一件事以外，一切正常出于某种原因，图表在顶部和下方添加了不需要的填充，使其看起来像是压扁的。（见下图）
canvas unwanted padding
我希望我的画布为180x180，图表为180x180。我怎么做到这一点？

在下面添加了图表代码：

let ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: this.strawpoll.answers.filter(data => data.amount > 0).map(data => data.name),
    datasets: [{
      data: this.strawpoll.answers.map(data => data.amount).filter(data => data > 0),
      backgroundColor: this.sliceColor,
      borderColor: this.borderColor,
      hoverBorderColor: this.borderColor,
      borderWidth: 4,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    layout: {
      padding: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      }
    },
  }
});

Answer 1

我认为如果你给你的图表的parent-div想要180x180像素，你可以添加你的选项

Debugger.IsAttached

grts Kevin

Chart.js在图表的顶部和下方添加不需要的填充，填充设置为0

1 个答案: