javascript - Chart.js:饼图的宽度和高度不受尊重

Question

我正在使用 Chart.js 创建饼图。我需要每个图表都是 76x76px。不幸的是，呈现的图表总是比包装 div 和 Canvas 本身的尺寸小一点。

如果您检查 FIDDLE 中的图表，您会明白我的意思:canvas 元素具有固定大小，但图表本身并没有完全填满它。

就好像为不存在的东西预留了最高利润率。

代码:

HTML

<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>

JS

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            data: [30, 70],
            backgroundColor: [
                'green',
                'gray'
            ],
            borderWidth: 0
        }]
    },
    options: {
        tooltips: {
             enabled: false
        },
        events: []
    }
});

CSS

.wrapper {
  width: 76px;
  height: 76px;
}

有什么想法可以让饼图填满 76x76 像素的 Canvas 吗？

Answer 1

额外的空间是为legend保留的，默认启用。只需禁用它，您就应该拥有图表的整个空间:

legend: {
  display: false
}

一个工作示例:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [30, 70],
      backgroundColor: [
        'green',
        'gray'
      ],
      borderWidth: 0
    }]
  },
  options: {
    tooltips: {
      enabled: false
    },
    legend: {
      display: false  // <- the important part
    },
    events: []
  }
});

.wrapper {
  width: 76px;
  height: 76px;
  border: 1px solid black; /* for demonstration purposes*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>