React中Chart.js水平条形图垂直标注线不显示求助

核心问题及修正点 #

你的配置存在几个关键错误，导致目标线无法显示，逐一修正如下：

1. 插件配置键名错误：Chart.js的插件配置键为复数形式plugins，而非plugin
2. ScaleID不匹配：你的x轴在scales中定义的键是xAxis，因此annotation中的scaleID必须对应为xAxis，而非x
3. 确保Annotation插件已正确注册：若使用Chart.js，需先导入并注册插件，示例代码：

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

修正后的完整配置 #

const options = {
    indexAxis: 'y' as const,
    responsive: true,
    scales: {
        xAxis: {
            max: 100,
            min: 0,
            display: false,
        },
        yAxis: {
            display: false,
        },
    },
    plugins: { // 修正为复数plugins
        annotation: {
            annotations: [
                {
                    type: 'line' as const,
                    mode: 'vertical',
                    scaleID: 'xAxis', // 修正为xAxis，匹配scales中的配置
                    value: 80,
                    borderColor: 'black',
                    borderWidth: 2,
                },
            ],
        },
    },
};

额外验证要点 #

• 确认theatreUtilisation变量为0-100之间的有效数值，保证条形图本身能正常渲染
• 检查Annotation插件版本与Chart.js版本是否兼容，避免版本不匹配引发的问题

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