[英]How to Increase the label font size and decrease the size of my pie using chart.js?
這是我使用的代碼:
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
}
}
}
});
這是輸出:
預期的輸出是這樣的:
如何修復我的標簽以使其更大一點並減小我的餡餅的大小? 我試圖將fontSize
放在我的選項中,但它沒有改變任何東西。 我也想要那些 % 並且我嘗試了這個,但是當我在圖表上使用數據點時它崩潰了。
我不知道您是否查看了chart.js
上的文檔,我在這里發布了您正在尋找的一些想法。
options: {
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
為了增強,請看 這個
你可以添加這個:
options: {
**maintainAspectRatio : true**, // make the pie small
legend: {
display: true,
labels: {
**fontSize: 15** //change the size of the labels
}
}
}
祝你好運
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.