我正在使用JS和Chart.js在HTML中制作堆叠条形图。对于此图表,我不需要轴或多个堆叠条形图(只有一个)。我想出了如何做所有这些和自定义标签,但我只希望标签显示在顶栏中(本例中为红色条)如何才能只在顶部条中显示标签呢?我不太清楚格式化程序是如何工作的,我只是复制并粘贴它,它显示的信息,我正在寻找。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="col-8 offset-2 my-5">
<div class="card">
<div class="card-body">
Stacked Bar Chart in Chart JS
<hr>
<canvas id="barchart"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
const ctx = document.getElementById('barchart').getContext('2d');
const myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [1],
datasets: [{
label: 'Hypo',
data: [12],
backgroundColor: [
'red',
],
borderColor: [
'red',
],
borderWidth: 1
}, {
label: 'Hyper',
data: [12],
backgroundColor: [
'orange',
],
borderColor: [
'orange',
],
borderWidth: 1
}]
},
options: {
plugins: {
legend: {
display: false
},
datalabels: {
color: 'black',
labels: {
title: {
font: {
family: "sans-serif",
size: 100,
weight: 'bold'
}
}
},
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
},
scales: {
x: {
stacked: true,
display: false,
},
y: {
beginAtZero: true,
stacked: true,
display: false,
},
}
}
});
</script>
1条答案
按热度按时间slsn1g291#
最后我自己找到了这个问题的答案。我把格式化程序函数改为: