引入chartjs-plugin-annotation时遇Uncaught TypeError错误求助

问题场景 #

使用Chart.js 4.1.1 + chartjs-plugin-annotation 2.1.0在Laravel项目中开发图表时，出现以下错误：

Uncaught TypeError: t.defaults.describe is not a function
    at chartjs-plugin-annotation.min.js:7:22552
    at Array.forEach (<anonymous>)
    at chartjs-plugin-annotation.min.js:7:22528
    at chartjs-plugin-annotation.min.js:7:298
    at chartjs-plugin-annotation.min.js:7:325

Chart.js本身可正常运行，仅引入annotation插件后报错。

原因分析 #

chartjs-plugin-annotation的版本兼容性规则明确：

• 2.x版本仅支持Chart.js 3.x
• 3.x版本才适配Chart.js 4.x
  当前使用的插件版本2.1.0与Chart.js 4.1.1不兼容，导致调用了Chart.js 4.x中已移除的defaults.describe方法。

解决步骤 #

1. 升级chartjs-plugin-annotation到兼容Chart.js 4.x的版本
   替换原有插件CDN链接为3.x稳定版（如3.0.1）。

2. 修正Chart.js 4.x的配置语法差异
   Chart.js 4.x对scales配置做了调整，原3.x的yAxes数组写法需改为对象形式。

修正后的代码示例 #

HTML引入部分 #

<!-- chart.js -->
<script src="{{ url('/assets/plugins/chart.js/Chart.min.js') }}"></script>

<!-- 替换为兼容Chart.js 4.x的annotation插件版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.0.1/chartjs-plugin-annotation.min.js"></script>

JavaScript配置部分 #

const hoursChart = document.getElementById('busiest-hours-chart').getContext('2d');
const arrayOfreservationHours = {{ Js::from($countreservationHours) }};
const annotation = {
    type: 'line',
    borderColor: 'black',
    borderDash: [6, 6],
    borderDashOffset: 0,
    borderWidth: 3,
    label: {
        enabled: true,
        content: 'aaa',
        position: 'end'
    },
    scaleID: 'y',
    value: 111
};
new Chart(hoursChart, {
    type: 'bar',
    data: {
        labels: Object.keys(arrayOfreservationHours),
        datasets: [{
            data: Object.values(arrayOfreservationHours),
            borderWidth: 1,
            backgroundColor: '#9BD0F5',
        }]
    },
    options: {
        plugins: {
            annotation: {
                annotations: {
                    annotation
                }
            },
            legend: {
                display: false
            }
        },
        scales: {
            // Chart.js 4.x中改为对象形式，而非数组
            y: {
                display: true,
                ticks: {
                    beginAtZero: true
                }
            }
        }
    }
});

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