You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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的版本,无需调整其他依赖和现有配置:

  1. 卸载当前安装的高版本插件
npm uninstall chartjs-plugin-annotation
  1. 安装最后一个适配Chart.js v2的插件版本0.5.7
npm install chartjs-plugin-annotation@0.5.7
  1. 插件注册逻辑无需修改,原有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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 04:48:05