[英]How to Increase the label font size and decrease the size of my pie using chart.js?
This is the code that I used:这是我使用的代码:
var ctx = document.getElementById("pages_breakdown").getContext('2d');
ctx.width = 400;
ctx.height = 300;
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Primary pages {{ $array_pages_breakdown[0] }}',
'Dupliacte pages {{ $array_pages_breakdown[1] }}',
'Paginated 2+ {{ $array_pages_breakdown[2] }}',
'Mobile alternates {{ $array_pages_breakdown[3] }}',
'Non-indexable pages {{ $array_pages_breakdown[4] }}',
'Non-200 pages {{ $array_pages_breakdown[5] }}',
'Failed URL {{ $array_pages_breakdown[6] }}'],
datasets: [{
data: [ {{ $array_pages_breakdown[0] }}, {{ $array_pages_breakdown[1] }}, {{ $array_pages_breakdown[2] }}, {{ $array_pages_breakdown[3] }}, {{ $array_pages_breakdown[4] }}, {{ $array_pages_breakdown[5] }}, {{ $array_pages_breakdown[6] }}],
backgroundColor: [
'rgba(59, 153, 129, 1.0)',
'rgba(232, 179, 58, 1.0)',
'rgba(214, 212, 209, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(122, 120, 117, 1.0)',
'rgba(224, 33, 81, 1.0)',
'rgba(244, 90, 39, 1.0)'
]
}]
},
options: {
rotation: (0.5 * Math.PI) - (95/180 * Math.PI),
responsive: false,
legend: {
position: 'left'
},
layout: {
padding:{
left: 30,
right: 0,
top: 0,
bottom: 0
}
}
}
});
This is the output:这是输出:
Expected output was this:预期的输出是这样的:
How can I fix my label to make it a little bigger and decrease the size of my pie?如何修复我的标签以使其更大一点并减小我的馅饼的大小? I tried to put
fontSize
inside my option but it didn't change anything.我试图将
fontSize
放在我的选项中,但它没有改变任何东西。 I want to have those % as well and I tried this , but when I use datapoints on my chart it crashes.我也想要那些 % 并且我尝试了这个,但是当我在图表上使用数据点时它崩溃了。
You can add this:你可以添加这个:
options: {
**maintainAspectRatio : true**, // make the pie small
legend: {
display: true,
labels: {
**fontSize: 15** //change the size of the labels
}
}
} }
good luck祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.