Chart.js图表循环缩放异常求助（含Source Map 404报错）

首先明确：控制台里的chart.umd.js.map 404错误不是导致图表缩放循环的直接原因，source map仅用于调试，不影响代码运行。真正的问题出在你使用了无版本号的Chart.js CDN链接，导致自动更新到了与旧插件不兼容的新版本。

解决步骤 #

1. 锁定Chart.js版本，解决插件兼容问题 #

当前你的Chart.js引用没有指定版本：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

这种无版本链接会自动指向Chart.js的最新稳定版，而你的chartjs-plugin-annotation@2.0.1是旧版本，和最新Chart.js（4.x+）存在兼容性问题，这就是图表出现缩放循环的根源。

你需要改为引用与chartjs-plugin-annotation@2.0.1兼容的Chart.js版本（该插件2.0.1适配Chart.js 3.x系列，推荐用3.9.1，这是3.x的最后一个稳定版）：

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.0.1/dist/chartjs-plugin-annotation.min.js"></script>

2. （可选）解决source map 404报错 #

如果想消除控制台的404提示，有两种方式：

• 方法一：在Chrome DevTools的设置里，取消勾选「Enable JavaScript source maps」，浏览器就不会尝试加载source map文件。
• 方法二：使用指定版本后的Chart.js CDN链接，这类链接通常会自带可用的source map，替换后404问题会自动消失。

验证修改 #

替换链接后刷新浏览器，图表的缩放循环问题应该会消失，网站可恢复正常使用。

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