使用Chart.js及Annotation插件时垂直线标签被截断的问题求助

问题说明 #

• 使用Chart.js 4.2.1构建折线图，借助chartjs-plugin-annotation 2.2.1绘制垂直线时，顶部标签出现截断：
  
• 需求：每条垂直线的顶部、底部都显示标签，同时支持在x轴下方绘制垂直线。

当前配置代码 #

annotation: {
    type: "label",
    xValue: value // xPosition
    yValue: value // yPosition It is maximum of value from dataset
    content: "content",
    font: {
        size: 12
    },
    color: "#fff",
    padding: 0,
    position: "center",
    xAdjust: 20,
};

解决方案 #

1. 修复标签截断问题 #

标签截断是因为图表绘图区域未预留足够空间，需调整layout.padding为顶部、底部留出标签高度：

options: {
    layout: {
        padding: {
            top: 25, // 适配顶部标签高度
            bottom: 25 // 适配底部或x轴下方标签高度
        }
    }
}

2. 实现顶部+底部双标签显示 #

不要用单个label注解，为每条垂直线创建两个独立的label注解，分别对应顶部和底部：

annotation: {
    annotations: {
        // 顶部标签
        topLabel: {
            type: 'label',
            xValue: yourXPosition,
            yValue: chart.scales.y.max, // 绑定Y轴最大值（顶部位置）
            content: '顶部标签内容',
            font: { size: 12 },
            color: '#fff',
            backgroundColor: '#000', // 加背景避免与折线重叠
            padding: { x: 5, y: 2 },
            position: 'center',
            xAdjust: 20
        },
        // 底部标签
        bottomLabel: {
            type: 'label',
            xValue: yourXPosition,
            yValue: chart.scales.y.min, // 绑定Y轴最小值（底部位置）
            content: '底部标签内容',
            font: { size: 12 },
            color: '#fff',
            backgroundColor: '#000',
            padding: { x: 5, y: 2 },
            position: 'center',
            xAdjust: 20
        },
        // 垂直线本体
        verticalLine: {
            type: 'line',
            xMin: yourXPosition,
            xMax: yourXPosition,
            borderColor: '#ff0000',
            borderWidth: 2
        }
    }
}

3. 实现x轴下方的垂直线及标签 #

要在x轴下方绘制垂直线，需调整垂直线的yMin/yMax到x轴下方区域，同时将标签yValue设为低于Y轴最小值的位置：

annotation: {
    annotations: {
        belowXAxisLine: {
            type: 'line',
            xMin: yourXPosition,
            xMax: yourXPosition,
            // 向下延伸Y轴范围的10%作为垂直线长度
            yMin: chart.scales.y.min - (chart.scales.y.max - chart.scales.y.min) * 0.1,
            yMax: chart.scales.y.min,
            borderColor: '#00ff00',
            borderWidth: 2
        },
        belowXAxisLabel: {
            type: 'label',
            xValue: yourXPosition,
            // 标签放在垂直线中间位置
            yValue: chart.scales.y.min - (chart.scales.y.max - chart.scales.y.min) * 0.05,
            content: 'x轴下方标签',
            font: { size: 12 },
            color: '#fff',
            backgroundColor: '#000',
            padding: { x: 5, y: 2 },
            position: 'center',
            xAdjust: 20
        }
    }
}

关键注意事项 #

• 确保插件启用：初始化Chart.js时需注册annotation插件，或在options中设置plugins.annotation.enabled: true
• 动态计算位置：若数据集或轴范围变化，建议在beforeUpdate钩子中动态计算yValue、yMin等值，避免硬编码偏移
• 标签背景：添加backgroundColor可提升标签辨识度，避免与图表内容重叠

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