如何将多系列数据转换为Google Charts兼容的JSON格式？

我明白你现在的困境：你已经从存储过程拿到了分类型的计数数据，但不知道怎么把这些零散的列表转换成Google Charts多折线图能识别的JSON结构。别担心，我们一步步来解决这个问题。

首先得明确：Google Charts的多折线图要求同一行包含同一个维度（这里是星期几）下所有系列的数值，而不是四个独立的数组。下面给你两种常用的解决方案，分别对应Google Charts支持的两种数据格式：

方案1：简单二维数组格式（快速上手） #

这种格式最直观，第一行是表头，后续每一行对应一个星期几的四个类型计数。

修改你的C#代码 #

直接在FoodCountCompare方法里整理数据并返回：

public JsonResult FoodCountCompare()
{
    string userId = User.Identity.GetUserId();
    var dc = new DataClasses1DataContext();
    var allData = dc.FoodCountCompare(userId).ToList();

    // 关键：定义星期的固定顺序，避免图表x轴乱序
    var dayOrder = new List<string> { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };

    // 构建Google Charts需要的二维数组
    var chartData = new List<object>();
    // 添加表头行
    chartData.Add(new object[] { "Day", "Protein", "HEC", "LEC", "OmegaFA" });

    // 遍历每个星期几，填充对应类型的计数（没有数据则填0）
    foreach (var day in dayOrder)
    {
        var proteinCount = allData.FirstOrDefault(d => d.Day == day && d.Type == "P")?.Count ?? 0;
        var hecCount = allData.FirstOrDefault(d => d.Day == day && d.Type == "H")?.Count ?? 0;
        var lecCount = allData.FirstOrDefault(d => d.Day == day && d.Type == "L")?.Count ?? 0;
        var omegaCount = allData.FirstOrDefault(d => d.Day == day && d.Type == "O")?.Count ?? 0;

        chartData.Add(new object[] { day, proteinCount, hecCount, lecCount, omegaCount });
    }

    return Json(chartData, JsonRequestBehavior.AllowGet);
}

前端使用示例 #

拿到JSON后，前端可以用arrayToDataTable快速转换：

google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    $.getJSON('/YourController/FoodCountCompare', function(jsonData) {
        var data = google.visualization.arrayToDataTable(jsonData);
        
        var options = {
            title: 'Food Type Count by Day',
            legend: { position: 'bottom' },
            curveType: 'function'
        };

        var chart = new google.charts.Line(document.getElementById('chart_div'));
        chart.draw(data, google.charts.Line.convertOptions(options));
    });
}

方案2：Google Charts DataTable格式（更灵活） #

如果需要自定义列类型、添加额外元数据，推荐用这种官方标准格式，它包含cols（列定义）和rows（数据行）两个部分。

C#代码实现 #

public JsonResult FoodCountCompare()
{
    string userId = User.Identity.GetUserId();
    var dc = new DataClasses1DataContext();
    var allData = dc.FoodCountCompare(userId).ToList();

    var dayOrder = new List<string> { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };

    // 构建DataTable结构
    var dataTable = new
    {
        cols = new[]
        {
            new { id = "", label = "Day", type = "string" },
            new { id = "", label = "Protein", type = "number" },
            new { id = "", label = "HEC", type = "number" },
            new { id = "", label = "LEC", type = "number" },
            new { id = "", label = "OmegaFA", type = "number" }
        },
        rows = dayOrder.Select(day => new
        {
            c = new[]
            {
                new { v = day },
                new { v = allData.FirstOrDefault(d => d.Day == day && d.Type == "P")?.Count ?? 0 },
                new { v = allData.FirstOrDefault(d => d.Day == day && d.Type == "H")?.Count ?? 0 },
                new { v = allData.FirstOrDefault(d => d.Day == day && d.Type == "L")?.Count ?? 0 },
                new { v = allData.FirstOrDefault(d => d.Day == day && d.Type == "O")?.Count ?? 0 }
            }
        }).ToList()
    };

    return Json(dataTable, JsonRequestBehavior.AllowGet);
}

前端使用示例 #

这种格式可以直接传入DataTable构造函数：

google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    $.getJSON('/YourController/FoodCountCompare', function(jsonData) {
        var data = new google.visualization.DataTable(jsonData);
        
        var options = {
            title: 'Food Type Count by Day',
            legend: { position: 'bottom' }
        };

        var chart = new google.charts.Line(document.getElementById('chart_div'));
        chart.draw(data, google.charts.Line.convertOptions(options));
    });
}

为什么你的原有代码行不通？ #

你之前把数据拆成了四个独立的列表并分别序列化，但Google Charts需要的是一个包含所有系列的统一数据集——每个行对应同一个星期几的四个类型计数，这样图表才能把同一x轴位置的多个数值关联起来，绘制出正确的多折线。

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