Angular 11中ng2-charts使用chartjs-plugin-annotation标注线不显示问题
问题原因
该报错并非chartjs-plugin-annotation的bug,是依赖版本不匹配导致:
chartjs-plugin-annotation@1.x仅适配Chart.js@3.x及以上版本- 你当前使用的
Chart.js@2.9.3、ng2-charts@2.3.0均属于Chart.js v2生态,和1.x版本的注解插件完全不兼容
推荐解决方案
优先选择降级注解插件到适配Chart.js v2的版本,无需调整其他依赖和现有配置:
- 卸载当前安装的高版本插件
npm uninstall chartjs-plugin-annotation
- 安装最后一个适配Chart.js v2的插件版本
0.5.7
npm install chartjs-plugin-annotation@0.5.7
- 插件注册逻辑无需修改,原有annotation配置写法也完全适配v0.5.7版本,重新编译项目即可看到标注线正常渲染。
备选方案(仅当需要使用1.x版本插件新特性时选择)
如果要保留chartjs-plugin-annotation@1.x,需要同时升级整套依赖:
- 升级
Chart.js到3.x及以上版本 - 升级
ng2-charts到3.x及以上版本
注意:ng2-charts v3要求Angular版本≥12,你当前使用的Angular 11无法适配,升级前需要先升级Angular框架版本
内容的提问来源于stack exchange,提问作者Nammen8
相关产品推荐
相关产品推荐

