如何将List<MyModel>转换为Google API DataTable？

当前Ajax可成功调用GetData()获取数据，但返回的List<MyModel>格式和Google Charts要求不匹配，导致图表无法正常渲染。

Google Charts API要求的数据格式示例 #

var data = new google.visualization.DataTable();
data.addColumn('string', 'First_name');
data.addColumn('string', 'Salary');
data.addColumn('boolean', 'Full_Time_Employee');
data.addRows([
    ['Mike', '$10,000', true],
    ['Jim', '$8,000', false],
    ['Alice', '$12,500', true],
    ['Bob', '$7,000', true]
]);

后端返回的JSON结构（单条数据示例） #

{ First_Name = "Mike", Salary= "10000",  Full_Time_Employee = true }

现有控制器代码 #

public async Task<IActionResult> GetData()
{
    try
    {
        // query data  
        IQueryable<MyModel> query = (IQueryable<MyModel>)(from x in _context1.CourseTaken_DbSet
                                               select x);
        //load data
        List<MyModel> graphData = await query.AsNoTracking().Take(100).ToListAsync();
        // return json data to google charts api
        return Json(graphData);
    }
    catch (Exception ex)
    {
        Console.Write(ex);
    }
    return View();
}

现有前端关键代码 #

$.ajax({
    type: "POST",
    url: "/Home/GetData",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
        alert("sucess" + r.d);
        var data = new google.visualization.arrayToDataTable(r.d);
        var chart = new google.visualization.Table($("#Chart01Div")[0]);
        chart.draw(data, options);
    },
    failure: function (r) {
        alert("Failure: " + r.d);
    },
    error: function (r) {
        alert("Error: " + r.d);
    }
});

尝试修改前端回调后，弹出内容为[object Object],[object Object],...，仍无法正常显示。

解决方案 #

方案1：后端直接返回符合要求的格式 #

在后端把List<MyModel>转换成Google Charts需要的二维数组结构，前端可直接解析：

修改后的控制器代码：

public async Task<IActionResult> GetData()
{
    try
    {
        var query = from x in _context1.CourseTaken_DbSet
                    select x;
        List<MyModel> graphData = await query.AsNoTracking().Take(100).ToListAsync();

        // 构建Google Charts需要的二维数组：首行是表头，后续是数据行
        var googleData = new List<List<object>>();
        // 添加表头
        googleData.Add(new List<object> { "First_name", "Salary", "Full_Time_Employee" });
        // 添加数据行，同时格式化Salary为带$和千分位的格式
        foreach (var item in graphData)
        {
            var formattedSalary = $"${int.Parse(item.Salary):N0}";
            googleData.Add(new List<object> { item.First_Name, formattedSalary, item.Full_Time_Employee });
        }

        return Json(googleData);
    }
    catch (Exception ex)
    {
        Console.Write(ex);
        return StatusCode(500, "获取数据失败");
    }
}

对应的前端success回调修改：

success: function (r) {
    var data = new google.visualization.arrayToDataTable(r);
    var chart = new google.visualization.Table($("#Chart01Div")[0]);
    chart.draw(data, options);
},

方案2：前端处理对象数组转换格式 #

如果不想改动后端，可在前端把返回的对象数组转换成Google Charts需要的结构：

修改后的前端success回调：

success: function (r) {
    if (r.length === 0) return;

    // 初始化DataTable实例
    var data = new google.visualization.DataTable();
    // 添加列定义
    data.addColumn('string', 'First_name');
    data.addColumn('string', 'Salary');
    data.addColumn('boolean', 'Full_Time_Employee');

    // 将对象数组转换为数据行
    var rows = r.map(item => {
        // 格式化Salary为带$和千分位的字符串
        var formattedSalary = "$" + parseInt(item.Salary).toLocaleString();
        return [item.First_Name, formattedSalary, item.Full_Time_Employee];
    });

    data.addRows(rows);
    var chart = new google.visualization.Table($("#Chart01Div")[0]);
    chart.draw(data, options);
},

额外优化：更新Google Charts加载方式 #

当前代码使用的google.load已不推荐，建议替换为最新的加载方式：

google.charts.load("current", { packages: ["table"] });
google.charts.setOnLoadCallback(drawChart01);

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