在C#中为Chartkick.js（基于Chart.js）构建多系列图表数据结构

针对你用C#生成Chartkick.js所需多系列图表数据的需求，我结合你已有的GenericChartJsSeriesModel类，整理了两种适配目标JSON格式的实现方案：

先明确需求目标 #

你需要的目标JSON格式是：

series = [ {name: "User1", data: {"bananas": 3, "Apples": 4}}, {name: "User2", data: {"bananas": 5, "Apples": 3}} ]

同时Chartkick也支持data用数组形式，比如 [["bananas", 3], ["Apples", 4]]，这两种格式我们都可以用C#模型来实现。

基于你现有类的改造 #

你已经有了GenericChartJsSeriesModel类，我们只需要给它补充对应data的属性即可：

方案1：适配字典格式的data（推荐，可读性更强） #

更新你的模型类，添加一个Dictionary<string, int>类型的Data属性，用来对应JSON里的键值对结构：

public class GenericChartJsSeriesModel : ReportDataModel 
{ 
    public string Name { get; set; }
    // 键是类别名称（比如水果名），值是对应数值
    public Dictionary<string, int> Data { get; set; } = new Dictionary<string, int>();
}

接下来构建多系列数据列表，直接实例化即可：

var multiSeriesData = new List<GenericChartJsSeriesModel>
{
    new GenericChartJsSeriesModel
    {
        Name = "User1",
        Data = new Dictionary<string, int>
        {
            {"bananas", 3},
            {"Apples", 4}
        }
    },
    new GenericChartJsSeriesModel
    {
        Name = "User2",
        Data = new Dictionary<string, int>
        {
            {"bananas", 5},
            {"Apples", 3}
        }
    }
};

方案2：适配数组格式的data #

如果你更倾向于Chartkick支持的数组形式，把Data属性改成二维列表：

public class GenericChartJsSeriesModel : ReportDataModel 
{ 
    public string Name { get; set; }
    // 每个子列表是[类别名称, 数值]的结构
    public List<List<object>> Data { get; set; } = new List<List<object>>();
}

构建数据的示例代码：

var multiSeriesData = new List<GenericChartJsSeriesModel>
{
    new GenericChartJsSeriesModel
    {
        Name = "User1",
        Data = new List<List<object>>
        {
            new List<object> {"bananas", 3},
            new List<object> {"Apples", 4}
        }
    },
    new GenericChartJsSeriesModel
    {
        Name = "User2",
        Data = new List<List<object>>
        {
            new List<object> {"bananas", 5},
            new List<object> {"Apples", 3}
        }
    }
};

序列化到JSON #

最后用JSON序列化工具把列表转成前端需要的格式，比如用System.Text.Json：

using System.Text.Json;

string chartJson = JsonSerializer.Serialize(multiSeriesData);

或者用Newtonsoft.Json：

using Newtonsoft.Json;

string chartJson = JsonConvert.SerializeObject(multiSeriesData);

序列化后的结果完全符合Chartkick的要求，可以直接传给前端使用。

小提示 #

• 如果你的数值不是整数，可以把int改成decimal或double，适配实际数据类型。
• 如果ReportDataModel里有不需要序列化的属性，记得加上[JsonIgnore]（对应System.Text.Json）或者[JsonProperty(NullValueHandling = NullValueHandling.Ignore)]（对应Newtonsoft.Json）来排除。

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