Javascript ChartJS–；有没有办法消除饼图周围的空白？

我正在处理一个图表，它的左右两边都有多余的间距。我一直在试图移除它，但运气不佳，我不知道现在还能做什么。我已经彻底阅读了文档，但似乎找不到解决方案。这可能吗？如果需要更多信息，请告诉我，我会提供

编辑：

var性别_数据=[10,35]；
变量图\性别\预设={
标签：[“女性”、“男性”]，
数据集：[
{
数据：性别数据，
背景颜色：[“#0fa0e3”和“#ff3549”]
}
]
};
var ctx3=$（“图表性别”）；
var图表性别=新图表（ctx3{
键入：“甜甜圈”，
数据：图形\性别\预设，
选项：{
回答：是的，
标题：{
显示：假，
位置：“顶部”，
字体：“粗体”，
字体大小：0，
全宽：假，
填充：0
},
图例：{
显示：假，
位置：“顶部”，
全宽：假，
标签：{display:false，usePointStyle:true，fontSize:15，fontStyle:“bold”}
}
}
});

问题不在于油炸圈饼，而在于使用它的画布

甜甜圈必须使用一个二次框，否则它看起来像一个省略号。因此，如果更改画布的大小并使其为二次型，则不再有任何边界

这是一个例子

弗斯特
第三

经过大量研究后，我发现设置宽度和高度会删除该空间

<div>
<canvas id="chart-gender" width="300" height="300"></canvas>  
</div>

---

我认为responsive需要设置为false，然后height和width属性的工作方式如下：

const options= {
 responsive: false
} 
<div>
  <canvas id="chart-gender" width="300" options={options} height="300"></canvas>  
</div>

const选项={
回答：错
} 

我最近也遇到了同样的问题。我的解决方案是用

options: { aspectRatio: 1 }

根据文档，默认设置为2。如果将其更改为1，图表画布将是方形的，并且甜甜圈/馅饼周围不会有所有空格

---

希望这对别人有帮助

我尝试过调整html元素本身的宽度，并尝试过为默认情况下占用该空间的图表元素（如图例元素）切换各种宽度和可见性设置。Ok。从内存中，使用了

canvas

元素，对吗？如果是这样，我会尝试调整画布的宽度等。画布是否直接在元素``上设置了属性？除此之外，在Chrome>Inspect元素中打开dev工具，查看元素的总体大小。正确。我尝试过改变canvas元素的大小。这不是问题。整个画布变小了，但我不希望它变小，我只希望周围的间隔消失。我已经检查了元素，但没有帮助，没人知道？我仍然在努力解决这个问题。如果不在开发工具中查看它，我已经建议了一些帮助。饼图周围的全部空白是画布，还是画布两侧都有较大的边距？谢谢！我只做了不起作用的，但忘了这个。嗯。。。什么？你能详细说明一下吗？我看着你的小提琴，我仍然不明白它是如何工作的，为什么它对我不起作用。你所说的“二次化”是什么意思？问题是，你的甜甜圈边界框的大小是如何计算的？chartJS通过获取传入高度来声明宽度。但是，如果边界框的宽度更大，则边界框内的左侧和/或右侧将出现空白。如果为边界框显式定义较小的宽度，则同样适用。然后，chartJS仅将高度作为宽度的相同值，导致顶部和/或底部出现空白。因此边界框必须具有相同的宽度和高度值，这意味着它是二次的。完美！非常感谢你找到这个！我使用了上面提到的一些变通方法，但它使图表看起来有点模糊。这样我们就不必牺牲责任心或任何东西。再次感谢！！天哪，我一直在寻找为什么我的图表这么长时间保持这么小，这终于解决了它。

const options= {
 responsive: false
} 
<div>
  <canvas id="chart-gender" width="300" options={options} height="300"></canvas>  
</div>

options: { aspectRatio: 1 }