Chart.js 圆环图尺寸

Chart.js Doughnut Chart Sizing

我在 Angular 项目中使用 ng2-charts。我有两个版本的项目。当前的生产版本是旧的,并且使用的是旧版本的 ng2-charts(并且,通过扩展,chart.js)。我正在努力升级项目。不过,我 运行 遇到了一些奇怪的事情。

我正在使用 ng2-charts 中的圆环图,旧版本中图表加载的默认大小是 1:1 比率:

您可以看到它以 240px 的高度和宽度加载。奇怪的是,在较新版本的 ng2-charts/chart.js 中,宽高比为 2:1:

我在新版本中使用相同的选项,相同的设置等。唯一的区别是包版本。

是否有 Chart.js 的设置可以帮助我修复它?我喜欢旧图表的大小,但如果不让图表的 canvas 溢出到我的组件之外,我就无法让新图表做到这一点,出于显而易见的原因,我不想这样做。

在提供给 Chart.js 的 options 对象中设置 aspectRatio: 1 以获得您要查找的内容。在当前版本中默认的 aspectRatio 是 2(曾经是 1,但为了提高向后兼容性而恢复了)。您可能会猜到,将其设置为 .5 会导致元素的 height 是宽度的两倍。

Codepen (this pen taken from thisGithub问题)