在Chart.js中的条形图上显示数据标签

Question

我有一个关于水平条形图的非常特殊的问题。是否可以在栏本身上显示数据标签？

如图所示：绘制图表

我试着用这个来做：

ticks: {
padding: -xx,
}

但不幸的是，标签消失在条下，就像条在标签上方一层一样。

有可能改变这一点吗？

这是我的代码：

var ctx = document.getElementById("stakeholderChart").getContext('2d');
var stakeholderChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Point 1", "Point 2", "Point 3", "Point 4", "Point 5", "Point 6", "Point 7", "Point 8", "Point 9", "Point 10", "Point 11", "Point 12"],
datasets: [{
backgroundColor: "#527a82",
data: [74, 74, 68, 67, 65, 63, 60, 60, 58, 57, 45, 44],
}],
},
options: opt
});
and my options:
var opt = {
/*Legende ausblenden*/
legend: {
display: false,
},
/*responsive*/
responsive: true,
/*tooltips - hover labels*/
tooltips: {
enabled: false,
},
/*Layout*/
layout: {
padding: {
right: 30,
}
},
/* Label auf Balken – Werte hinter balken*/
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
color: '#fff',
font: {
weight: 'bold',
size: 14,
},
formatter: function(value, context) {
return value + '%';
},
},
},
/*Plugins ende*/
/*Animation*/
animation: {
duration: 2000
},
/*Animation Ende*/

/*Achsen Einstellungen*/
scales: {
/* x Achse */
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 90,
}
}],
/*x-axes ende*/
/* Y Achse */
yAxes: [{
display: true,
gridLines: {
display: false,
},
ticks: {
fontColor: '#fff',
fontStyle: 'normal',
fontSize: 13,
padding: -170,
},
categoryPercentage: 1.0,
barPercentage: 0.85,
}],
/* y-axes ende*/
},
/*Scales Ende*/
}

提前感谢！

Answer 1

yAxes: [{
display: true,
gridLines: {
display: false,
},
ticks: {
fontColor: '#fff',<-- Text is currently white, change to black
fontStyle: 'normal',
fontSize: 13,
padding: -170,,<-- set to 0 or remove
},
categoryPercentage: 1.0,
barPercentage: 0.85,
}],/* y-axes ende*/

Answer 2

在代码中添加如下选项

options:  {
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
} 
});

或访问https://jsfiddle.net/tushar22/bfd98r26/5/

Answer 3

对于水平条形图，您可以简单地启用'mirror'选项：

options: {
scales: {
yAxes: [{
ticks: {
mirror: true //Show y-axis labels inside horizontal bars
}
}]
}
}

查看文档：https://www.chartjs.org/docs/latest/axes/cartesian/#tick-配置

">围绕轴翻转刻度标签，在图表中显示标签而不是在外面。注：仅适用于垂直刻度">