使用ChartJs.Blazor 2.0.2构建堆叠条形图时触发onClick未定义错误

我之前在Blazor WebAssembly项目里用ChartJs.Blazor 2.0.2做堆叠条形图时，也碰到过一模一样的错误！折腾了好一会儿才找到根源，主要是版本兼容和脚本配置的问题，下面把亲测有效的解决方法分享给你：

1. 先搞定Chart.js的版本匹配 #

ChartJs.Blazor 2.x系列和Chart.js 3.x+版本不兼容！后者的API结构做了大幅改动，导致interop脚本找不到onClick属性。你得换成Chart.js 2.9.x版本，我用的是2.9.4，完全没问题：

• 如果是用npm管理的话，执行：

  npm uninstall chart.js
  npm install chart.js@2.9.4
  

• 要是用libman，直接在libman.json里指定版本2.9.4拉取资源就行。

2. 调整脚本引入的顺序和方式 #

index.html里的脚本顺序很关键，而且别给Chart.js加type="module"属性（2.x版本不是模块，加了会导致全局找不到Chart对象）。正确的引入应该是这样：

<script src="lib/moment.js/moment.js"></script>
<script src="lib/Chart.js/chart.js"></script>
<script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>

3. 简化Tooltip配置排查问题 #

你的代码里的Tooltip配置本身没问题，但如果版本不对，某些配置项可能会触发异常。可以先把Tooltip简化成基础配置，验证图表能正常渲染后再加回复杂设置：

Tooltips = new Tooltips
{
    Mode = InteractionMode.Index,
    Intersect = false
}

4. 清理缓存重新构建 #

最后别忘了清掉浏览器缓存（Ctrl+Shift+R强制刷新），再删除项目的bin和obj文件夹重新构建——有时候旧的缓存脚本会搞出奇怪的冲突。

按照这些步骤调整完，我当时的错误就消失了，堆叠条形图正常渲染，点击"Randomize Data"按钮也能正常更新数据。

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