Chart.js甜甜圈图大小调整 [英] Chart.js Doughnut Chart Sizing

问题描述

我正在Angular项目中使用

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

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

是否有Chart.js的设置可以帮助我修复它？我喜欢旧图表的大小，但是如果不允许图表的 canvas 在我的组件之外放血，就无法获得新的图表的大小。我不想要。

解决方案

在 $ s $ c>中设置 aspectRatio：1 提供给Chart.js的 options 对象，以获取所需的内容。当前版本中默认的 aspectRatio 为2（曾经有一段时间为1，但为了提高向后兼容性而对其进行了还原）。您可能会猜到，将其设置为.5会导致元素的高度是宽度的两倍。

Codepen （此笔取自这 Github问题）

I'm using ng2-charts in an Angular project. I have two versions of the project. The current production version is old and using an old version of ng2-charts (and, by extension, chart.js). I'm working on upgrading the project. I've run across something weird though.

I'm using the doughnut chart from ng2-charts, and the default size that the chart loads at in the old version is a 1:1 ratio:

You can see that it loads with a height and width of 240px. The weird thing is that in the newer version of ng2-charts/chart.js, the width to height ratio is 2:1:

I am using the same options in the new version, the same setup, etc. The only difference is the package version.

Is there a setting for Chart.js that would help me fix it? I like the size of the old chart, but can't get the new one to do that without allowing the canvas of the chart to bleed outside my component, which for obvious reasons I don't want.

解决方案

Set aspectRatio: 1 in the options object provided to Chart.js to get what you're looking for. The default aspectRatio is 2 in the current version (there was a time when it was 1, but that was reverted to improve backwards compatibility). As you might guess, setting it to .5 causes the height of the element to be double that of the width.

Codepen (this pen taken from this Github issue)

这篇关于Chart.js甜甜圈图大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！