ASP.NET MVC中Google Charts类型不匹配错误排查求助

嘿，这个错误其实很好定位——你遇到的Uncaught (in promise) Error: Type mismatch. Value 1 does not match type string in column index 0，核心问题就是Google Charts期望第一列是字符串类型，但你实际传入的是数字值。

问题根源拆解 #

咱们对着代码捋一遍：

• 后端侧：i.Value对应的是r.MonthOfHoliday，从报错里的Value 1能看出来，这是一个整数类型的月份编号（比如1代表一月），序列化后在JSON里是纯数字格式。
• 前端侧：你给DataTable第一列定义的类型是string：data.addColumn('string', 'Value')，数字和字符串类型不匹配，直接导致图表加载失败。

两种解决方案，选一个就行 #

方案1：前端修改列类型为数字（更推荐）

既然月份是数字编号，用number类型更贴合数据本身的语义，只需要改一行代码：

// 把第一列的类型从string改成number
data.addColumn('number', 'Month');
data.addColumn('number', 'Count');
data.addRows(datassthpmpro);

这样Google Charts就能正确识别月份的数字值，不会再报类型不匹配的错误。

方案2：后端把月份值转成字符串

如果你确实需要第一列是字符串类型（比如要显示“1月”这类文本），可以在后端把月份值转成字符串再序列化：

// 修改查询中的Value字段，将数字转成字符串
select new { Value = g.Key.ToString(), Count = g.Sum(h => h.HoursTaken) }

这样传到前端的JSON里第一列就是字符串，和你定义的列类型完全匹配。

额外的小优化建议 #

• 前端获取ViewBag数据时，直接用@Html.Raw()可以避免JSON转义的坑，不用再手动调用JSON.parse：

  var datassthpmpro = @Html.Raw(ViewBag.datajthpmpro);
  

• 要是想让月份显示得更友好（比如“January”或者“一月”），可以在后端用DateTimeFormatInfo.CurrentInfo.GetMonthName(g.Key)把数字转成月份名称，再传给前端，用户体验会更好。

验证修改效果 #

改完之后刷新页面，先检查浏览器控制台是否还有报错，再确认图表能否正常渲染。如果还有问题，可以在前端加一句console.log(datassthpmpro)，查看每一行数据的类型是否和DataTable定义的一致，很快就能排查出问题。

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