[英]How to set labels align left in Horizontal Bar using chart.js?
我的代碼使用 chart.js
var ctx_1 = document.getElementById('non_200_pages').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ["Total","301 Redirect","Broken Pages (4xx Errors)","Uncategorised HTTP Response Codes","5xx Errors","Unauthorised Pages","Non-301 Redirects"],
datasets: [{
data: [ {{ $array_non_200_pages[0] }}, {{ $array_non_200_pages[1] }}, {{ $array_non_200_pages[2] }}, {{ $array_non_200_pages[3] }}, {{ $array_non_200_pages[4] }}, {{ $array_non_200_pages[5] }}, {{ $array_non_200_pages[6]}} ],
backgroundColor: [
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)',
'rgba(237, 56, 98, 1.0)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize:5,
display: false
},
gridLines: {
drawBorder: false,
}
}],
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: Math.round
}
}
}
});
我的工作
我在如何設置標簽文本左對齊方面遇到問題。 我想要做的是我希望我的標簽與下一張圖片相同,但我不知道Options:{
設置文本對齊的位置。 有沒有人可以幫助我如何解決它? 我在https://www.chartjs.org/docs/latest/configuration/legend.html上找不到任何內容。 先感謝您。
yAxis.ticks
標簽可以通過定義mirror: true
並添加一些padding
來左對齊。
yAxes: [{
ticks: {
mirror: true,
padding: 220
},
要使標簽在圖表區域可見,需要在 圖表布局左側定義相同的填充。
layout: {
padding: {
left: 220
}
},
請在下面查看您更改的代碼。
new Chart('myChart', { type: 'horizontalBar', data: { labels: ["Total", "301 Redirect", "Broken Pages (4xx Errors)", "Uncategorised HTTP Response Codes", "5xx Errors", "Unauthorised Pages", "Non-301 Redirects"], datasets: [{ data: [16, 14, 1, 1, 0, 0, 0], backgroundColor: ['rgba(237, 56, 98, 1.0)', 'rgba(237, 56, 98, 1.0)', 'rgba(237, 56, 98, 1.0)', 'rgba(237, 56, 98, 1.0)', 'rgba(237, 56, 98, 1.0)', 'rgba(237, 56, 98, 1.0)','rgba(237, 56, 98, 1.0)'] }] }, options: { responsive: false, layout: { padding: { left: 220 } }, legend: { display: false }, scales: { yAxes: [{ ticks: { mirror: true, padding: 220 }, gridLines: { display: false }, }], xAxes: [{ ticks: { display: false }, gridLines: { drawBorder: false, } }], } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" width="500" height="200"></canvas>
您可以通過在刻度配置上使用 crossAlignment 選項來控制標簽對齊。 有三個可能的值:“ near
”、“ center
”和“ far
”。
在您的情況下,您將只使用near
options: {
...
scales: {
y: {
ticks: {
crossAlign: "far",
},
},
},
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.