如何在Chart JS的水平条形图边缘显示数据

我来帮你搞定这个需求！在Chart.js里实现水平条形图的边缘数据显示，核心是利用它的插件钩子来自定义绘制文本，下面是完整的实现方案和细节：

完整实现代码 #

首先准备画布，然后编写Chart.js配置：

<canvas id="horizontalBarChart"></canvas>

const ctx = document.getElementById('horizontalBarChart').getContext('2d');

const horizontalBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['项目A', '项目B', '项目C', '项目D'],
        datasets: [{
            label: '数值',
            data: [120, 190, 300, 50],
            backgroundColor: 'rgba(54, 162, 235, 0.6)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        // 设置为水平条形图
        indexAxis: 'y',
        scales: {
            x: {
                beginAtZero: true,
                // 给文本预留空间，设置比最大数据稍大的最大值
                max: 350
            }
        },
        plugins: {
            // 可选：隐藏图例，让图表更简洁
            legend: {
                display: false
            },
            // 自定义绘制数据文本的核心钩子
            afterDraw: function(chart) {
                const ctx = chart.ctx;
                // 遍历每个数据集
                chart.data.datasets.forEach((dataset, datasetIndex) => {
                    const metaData = chart.getDatasetMeta(datasetIndex);
                    // 遍历每个条形元素
                    metaData.data.forEach((bar, index) => {
                        const dataValue = dataset.data[index];
                        // 跳过0值避免无效显示（可选）
                        if (dataValue === 0) return;

                        // 计算文本位置：条形右端点+偏移量，垂直居中于条形
                        const textX = bar.x2 + 10;
                        const textY = bar.y + bar.height / 2;

                        // 设置文本样式
                        ctx.font = '14px "Arial", sans-serif';
                        ctx.fillStyle = '#333';
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';

                        // 绘制数据文本
                        ctx.fillText(dataValue, textX, textY);
                    });
                });
            }
        }
    }
});

关键细节说明 #

1. 水平条形图配置：通过indexAxis: 'y'将图表设置为水平模式，这会翻转坐标轴的方向
2. 预留文本空间：scales.x.max要设置为比你的最大数据值稍大的数值，避免文本超出画布范围
3. afterDraw钩子：这是Chart.js提供的绘图后钩子，我们在这里手动绘制文本，确保文本在所有图表元素绘制完成后添加
4. 坐标计算：水平条形的bar.x2是它的右端点X坐标，加上10px的偏移量让文本和条形保持合适间距；bar.y + bar.height/2保证文本垂直居中于条形

可选优化技巧 #

• 动态调整文本颜色：根据条形的背景色深浅自动切换文本颜色，提升可读性：

  // 提取背景色的RGB值
  const rgbValues = dataset.backgroundColor[index].match(/\d+/g).slice(0,3).map(Number);
  // 通过亮度判断设置文本颜色
  const brightness = rgbValues[0]*0.299 + rgbValues[1]*0.587 + rgbValues[2]*0.114;
  ctx.fillStyle = brightness > 127 ? '#333' : '#ffffff';
  

• 响应式适配：如果图表是响应式的，可以在resize事件中重新计算位置，或者利用Chart.js的resize钩子更新文本位置

内容的提问来源于stack exchange，提问作者Balaji G