Chart.js从2.x升级至3.5.1出现HALF_PI未定义报错该如何解决？

根因定位 #

该报错由三类兼容性问题直接导致：

• 安装的@types/chart.js@2.9.34是适配Chart.js 2.x的类型定义包，和3.x版本完全不兼容，会引发运行时、类型检查双重冲突
• 单独引用的chartjs.helpers.v3.5.1.js独立辅助文件与当前安装的Chart.js核心包不匹配，Chart.js 3.x已经内置所有helpers能力，无需单独引入该独立文件
• 你使用的chartjs-plugin-datalabels@2.0.0-rc.1是测试版本，存在兼容性隐患，且Chart.js 3.x不再支持第三方插件自动注册，必须手动注册后才能生效

具体修复步骤 #

• 第一步：卸载过时的类型定义包
  Chart.js 3.x之后官方已经内置完整的TypeScript类型定义，不需要单独安装@types/chart.js，执行如下命令移除冲突的类型包：

  # npm用户执行
  npm uninstall @types/chart.js
  # yarn用户执行
  yarn remove @types/chart.js
  

• 第二步：修复数据标签插件的兼容性与注册逻辑
  首先升级插件到正式稳定版本，避免RC测试版本的兼容问题：

  npm install chartjs-plugin-datalabels@latest
  

  然后在项目初始化Chart的位置手动注册插件：

  import Chart from 'chart.js/auto'
  import ChartDataLabels from 'chartjs-plugin-datalabels'
  
  // 全局注册插件
  Chart.register(ChartDataLabels)
  

• 第三步：移除单独引入的独立helpers文件
  删除所有html或者入口文件中对chartjs.helpers.v3.5.1.js的单独引用，如果需要用到helpers方法，直接从官方包导出即可：

  import { helpers } from 'chart.js'
  // 直接调用helpers下的方法即可，不需要额外引入独立脚本
  

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