Chart.js柱状图自定义需求咨询：柱内显示数值及减小柱间距

你好！针对你提出的两个Chart.js柱状图自定义需求，我来给你详细说明实现方案，直接基于你的代码修改即可：

一、在柱子内部水平显示数值（如"720 units"） #

要实现把原本tooltip里的数值放到柱子内部并水平展示，我们可以用Chart.js的原生钩子来手动绘制文本，无需额外引入插件，核心思路是在图表绘制完成后，遍历每个柱子计算中心位置，再把格式化后的数值文本绘制上去。

二、减小柱子之间的间距 #

Chart.js提供了两个关键配置项来控制柱子间距：

• barPercentage：控制单根柱子占其所在分类宽度的比例（取值范围0-1）
• categoryPercentage：控制分类整体占图表宽度的比例（取值范围0-1）
  把这两个值适当调大，就能有效缩小柱子之间的间距。

修改后的完整代码 #

import Chart from 'chart.js/auto';

(function() {

const data = [
{
name: 'Neighbour A',
consumption: 720,
},
{
name: 'Neighbour B',
consumption: 745,
},
{
name: 'Neighbour C',
consumption: 917,
},
{
name: 'My Household',
consumption: 813,
}
];

new Chart(document.getElementById('consumptions'), {
type: 'bar',
data: {
labels: data.map(m => m.name),
datasets: [{
label: 'Consumption',
data: data.map(m => m.consumption),
borderWidth: 1,
barThickness: 40,
}]
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
// 配置减小柱间距的核心参数
barPercentage: 0.9, // 柱子占分类宽度的90%，值越大柱子越宽
categoryPercentage: 0.9, // 分类占图表宽度的90%，值越大分类间空隙越小
plugins: {
// 自定义实现柱内文本绘制
afterDraw: function(chart) {
const ctx = chart.ctx;
chart.data.datasets.forEach((dataset, datasetIndex) => {
const meta = chart.getDatasetMeta(datasetIndex);
// 只处理未隐藏的数据集
if (!meta.hidden) {
meta.data.forEach((bar, index) => {
const dataValue = dataset.data[index];
// 计算柱子的中心坐标，确保文本水平居中
const x = bar.x;
const y = bar.y + (bar.base - bar.y) / 2;
// 设置文本样式
ctx.font = '14px Arial';
ctx.fillStyle = '#fff'; // 白色文本适配深色柱子，可根据柱子颜色调整
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 绘制带单位的文本
ctx.fillText(`${dataValue} units`, x, y);
});
}
});
}
}
}
})

})();

额外说明 #

1. 如果你柱子的填充色偏浅，可以把ctx.fillStyle改成#333这类深色，保证文本可读性；
2. barPercentage和categoryPercentage的数值可以根据你的实际布局需求微调，最大可以设置为1（此时柱子完全填满分类空间，几乎无间距）。

备注：内容来源于stack exchange，提问作者FC5570