在chart.js中,可以通过以下步骤在堆叠条形图的每个条形中添加数据标签:
<canvas id="myChart"></canvas>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['标签1', '标签2', '标签3'],
datasets: [{
label: '数据集1',
data: [10, 20, 30],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '数据集2',
data: [15, 25, 35],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
},
plugins: {
legend: {
display: true
},
datalabels: {
anchor: 'end',
align: 'end',
color: '#000',
font: {
weight: 'bold'
},
formatter: function(value, context) {
return value;
}
}
}
}
});
通过以上步骤,就可以在chart.js的堆叠条形图中添加数据标签。你可以根据实际需求,调整插件的配置和数据标签的显示方式。
领取专属 10元无门槛券
手把手带您无忧上云