[英]chart.js cuts off canvas - but padding makes doughnut very small
I have created a doughnut chart.js.我创建了一个甜甜圈 chart.js。
Without padding the canvas is cut off like没有填充画布被切断就像
first i tried adding this code首先我尝试添加此代码
options: {
cutoutPercentage: 85,
layout: {
padding: {
bottom: 20
}
},
It works for the padding, but the canvas then becomes really small like它适用于填充,但是画布变得非常小,就像
The doughnut was already pretty small in smartphone view, but this is to small...甜甜圈在智能手机中已经很小了,但这太小了……
source code on github github上的源代码
Anyone has an alternative solution to this issue?任何人都有这个问题的替代解决方案?
I found that the plugins
part of your code was causing most of the problem.我发现您代码的plugins
部分导致了大部分问题。
I experimented with the additional height being set in the plugins
so that your plugins
and options
look like this:我尝试在plugins
中设置额外的高度,以便您的plugins
和options
如下所示:
options: {
cutoutPercentage: 85,
layout: {
padding: {
bottom: 5
}
},
legend: {
labels: {
fontColor: '#384241',
boxWidth: 7,
fontFamily: "'arla-thin'"
}
}
},
plugins: [{
beforeInit: function (chart, options) {
chart.legend.afterFit = function () {
this.height = this.height + 5;
}
}
}]
I also changed the #usersChart
css to margin-bottom: 20px;
我还将#usersChart
css 更改为margin-bottom: 20px;
to reduce the gap.以缩小差距。
Here's what it looks like on a Galaxy S5.这是 Galaxy S5 上的样子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.