如何借助Asp.net MVC控制器数据，使用Google Charts创建简易图表？

我来帮你搞定这个问题～你现在的控制器返回的JSON格式不太符合Google Charts的要求，我给你整理了完整的修正方案：

1. 修正ASP.NET控制器的JSON输出格式 #

Google Charts需要特定结构的DataTable数据，你原来的代码把列和行拆成了列表里的两个对象，这会导致前端无法正确解析。下面是调整后的控制器代码：

public JsonResult HierachyChart(int id)
{
    // 构建完全符合Google Charts DataTable规范的对象
    var chartData = new
    {
        cols = new[]
        {
            new { id = "", label = "Employee Name", type = "string" },
            new { id = "", label = "Salary", type = "number" }
        },
        rows = new[]
        {
            new { c = new[] { new { v = "Bob" }, new { v = 35000 } } },
            new { c = new[] { new { v = "Alice" }, new { v = 44000 } } },
            new { c = new[] { new { v = "Frank" }, new { v = 27000 } } },
            new { c = new[] { new { v = "Floyd" }, new { v = 92000 } } },
            new { c = new[] { new { v = "Fritz" }, new { v = 18500 } } }
        }
    };

    // 如果前端用GET请求获取数据，需要加上这个参数允许跨GET请求
    return Json(chartData, JsonRequestBehavior.AllowGet);
}

关键说明： #

• cols数组里必须给每个列指定type（比如string/number），Google Charts靠这个识别数据类型
• rows里的每一行都要包裹在c数组中，每个值用v字段标记，这是官方要求的结构

2. 前端页面的图表渲染代码 #

接下来在前端页面（比如Razor视图或HTML文件）中引入Google Charts库，并编写JavaScript代码获取数据、渲染图表：

<!-- 引入Google Charts的加载器脚本 -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- 引入jQuery（如果你的项目没引入的话，用于发AJAX请求） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    // 加载Google Charts的核心图表包
    google.charts.load('current', { 'packages': ['corechart'] });
    // 加载完成后执行绘图函数
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        // 向控制器发送请求获取数据，替换成你的控制器名称
        $.getJSON('/YourControllerName/HierachyChart?id=1', function (data) {
            // 将控制器返回的JSON转换成Google Charts的DataTable对象
            var dataTable = new google.visualization.DataTable(data);

            // 设置图表的配置选项
            var options = {
                title: '员工薪资统计',
                width: 600,
                height: 400,
                bar: { groupWidth: '75%' },
                legend: { position: 'none' },
                backgroundColor: '#f5f5f5'
            };

            // 初始化柱状图（可以换成PieChart/BarChart等其他类型）
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            // 绘制图表
            chart.draw(dataTable, options);
        });
    }
</script>

<!-- 图表的容器，图表会渲染到这里 -->
<div id="chart_div"></div>

3. 几个注意事项 #

• 记得把代码里的YourControllerName替换成你实际的控制器名称
• 如果想用POST请求获取数据，前端改成$.post，控制器可以去掉JsonRequestBehavior.AllowGet参数（默认允许POST）
• 想要更换图表类型，只需要把ColumnChart换成对应的类型，比如PieChart、LineChart即可

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