Chart.js：饼图的宽度和高度未得到尊重。

Question

我正在使用Chart.js创建饼图。我需要每个图表的大小为76x76像素。不幸的是，渲染出来的图表总是比包裹它的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;
}

你有什么建议可以让饼图填满 76x76px 的画布吗？

- lesssugar

Answer 1

额外的空间是为图例保留的，默认情况下在options.plugins.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: {
    plugins: {
      tooltips: {
        enabled: false
      },
      legend: {
        display: false  // <- the important part
      },
    },
  }
});

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

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>

- andreas

---

好的，你说得对。如果你愿意，可以在这里报告这种行为：https://github.com/chartjs/Chart.js/issues ;) - andreas

@Leandro，我已将我的答案更新到最新的Chart.js版本，我的方法仍然有效。 - andreas

在选项中设置aspectRatio: 3，它也会使其变小。 - Engineer S. Saad

borderWidth: 0 应该放在选项对象中。图例和工具提示现在作为插件实现，因此也在选项对象内：plugins: { tooltip: { enabled: false }, legend: { display: false } }。请更新您的答案以反映当前版本的 chart.js。 - movAX13h

感谢@movAX13h的建议。我不同意您关于borderWidth的观点，但同意您关于tooltip和legend的观点。我已经相应地更新了我的答案。 - andreas