Chart.js Doughnut Chart Sizing

守給你的承諾、 提交于 2019-12-11 05:04:39

问题


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.


回答1:


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)



来源:https://stackoverflow.com/questions/50651940/chart-js-doughnut-chart-sizing

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!