Chart.js标注库垂直线位置错误问题求助

使用Chart.js的annotation插件时，X轴标签为0、1、4、8、12、15、20、24、25、28、32，想要在7.5位置添加垂直标注线，但插件却将线添加到了24和25之间。

相关代码如下：

for (const valueObj of valueList) {
    const {value, annotationId, color} = valueObj;
    const floatVal = parseFloat(value);

    const annotation = {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x',
        value: floatVal,
        borderColor: color,
        borderWidth: 2,
        label: {
            content: `x = ${value}`,
            enabled: true,
            position: 'top'
        }
    };

    chart.options.plugins.annotation.annotations[annotationId] = annotation;

}

chart.update();

原因 #

你的X轴默认是category（分类）类型，此时annotation插件会把value值当作标签的索引来定位，而非实际数值位置。你的X轴有11个标签，索引范围为0-10，7.5会被解析为介于第7个标签（24）和第8个标签（25）之间，因此出现错误定位。

修复方案 #

将X轴类型改为linear（数值轴），让Chart.js基于实际数值计算位置：

1. 修改图表的X轴配置，添加type: 'linear'，并通过ticks.callback保留指定标签：

const chart = new Chart(ctx, {
    type: 'line', // 你的图表类型
    data: {
        labels: [0, 1, 4, 8, 12, 15, 20, 24, 25, 28, 32], // 保持原标签数组
        datasets: [/* 你的数据集 */]
    },
    options: {
        scales: {
            x: {
                type: 'linear', // 关键：设置为数值轴
                ticks: {
                    // 仅显示指定的标签
                    callback: function(value) {
                        const targetLabels = [0, 1, 4, 8, 12, 15, 20, 24, 25, 28, 32];
                        return targetLabels.includes(value) ? value : null;
                    }
                }
            }
        },
        plugins: {
            annotation: {
                annotations: {} // 你的注解对象
            }
        }
    }
});

2. 原annotation逻辑无需修改，保持如下即可：

for (const valueObj of valueList) {
    const {value, annotationId, color} = valueObj;
    const floatVal = parseFloat(value);

    const annotation = {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x',
        value: floatVal,
        borderColor: color,
        borderWidth: 2,
        label: {
            content: `x = ${value}`,
            enabled: true,
            position: 'top'
        }
    };

    chart.options.plugins.annotation.annotations[annotationId] = annotation;
}

chart.update();

备选方案（若需保留分类轴） #

若因特殊需求无法改为数值轴，可手动计算7.5对应的索引位置：

// 定义X轴的数值范围
const xMin = 0;
const xMax = 32;
// 计算7.5在范围内的相对占比
const relativePosition = (7.5 - xMin) / (xMax - xMin);
// 转换为分类轴的索引位置
const totalLabels = chart.data.labels.length;
const targetIndex = relativePosition * (totalLabels - 1);

// 构建annotation时使用计算后的索引
const annotation = {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x',
    value: targetIndex, // 使用计算出的索引值
    borderColor: color,
    borderWidth: 2,
    label: {
        content: `x = 7.5`,
        enabled: true,
        position: 'top'
    }
};

注：该方案需维护X轴的数值范围，稳定性不如直接改为数值轴。

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