ASP.NET Core MVC中Google Charts动态绑定可变列数据的问题

核心问题是Razor渲染C#对象到JS上下文时默认会做HTML编码，且C#集合类型直接输出不会自动转换为合法JS数组结构，导致Google Charts无法识别数据，可按以下步骤处理：

1. 后端序列化数据为标准JSON #

无需手动拼接字符串或额外转换二维数组，直接用官方序列化工具将图表数据转为JSON格式，可自动处理转义、特殊字符兼容问题：

// 引入序列化命名空间
using System.Text.Json;

// Controller中处理数据，赋值到模型或ViewBag
// 假设dataModel.ChartPlotData.Data为已填充好的List<List<object>>结构，第一行存列名，后续行存业务数据
dataModel.ChartJson = JsonSerializer.Serialize(dataModel.ChartPlotData.Data);

2. 前端视图无编码输出JSON #

调用Html.Raw()方法跳过Razor默认的HTML转义逻辑，直接将JSON输出为JS可识别的数组结构：

<!-- 图表容器 -->
<div id="columnchart_div" style="width: 900px; height: 500px;"></div>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 直接传入反序列化后的JS数组即可，无需额外处理
  var chartData = google.visualization.arrayToDataTable(@Html.Raw(Model.ChartJson));

  // 此处填写你的自定义图表配置
  var options = {
    title: '业务数据统计',
    hAxis: {title: '年份'},
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
  chart.draw(chartData, options);
}
</script>

动态列数兼容说明 #

该方案天然支持不固定列数的场景，只要后端List<List<object>>的结构符合「首行是列名、后续行是对应维度数据」的Google Charts要求，不管是2列还是多列都可以直接渲染，无需修改前端代码。

避坑提示 #

• 不要手动拼接JSON字符串，官方序列化工具会自动处理日期、特殊符号、引号转义等场景，大幅降低格式错误概率
• 不可省略Html.Raw()，否则输出的JSON会被转义为"等HTML编码字符，JS无法识别为合法数组
• 若存在日期类型数据，可在后端序列化时统一转为Google Charts支持的字符串格式，或在JS拿到数组后手动转换为Date类型再传入arrayToDataTable

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