如何将C# WebAPI返回的JSON转换为HighCharts饼图所需格式

首先注意你给出的原始返回JSON存在语法错误，外层包裹的{}应该是数组标识[]，正常C# WebAPI返回集合类数据时会自动处理为数组格式，不影响后续转换。你可以根据场景选择后端转换或者前端转换两种实现方式：

方案1：C# 后端直接转换（推荐） #

后端直接转换可以减少前端计算量，也更方便统一数据规则：

1. 首先定义HighCharts饼图对应的数据模型

public class PieChartItem
{
    // 饼图扇区显示名称
    public string name { get; set; }
    // 饼图扇区对应数值
    public int y { get; set; }
    // 无下钻需求可赋值为空字符串，有下钻需求填对应下钻标识即可
    public string drilldown { get; set; }
}

2. 用LINQ对原始数据做映射转换

// 假设originalData是你获取到的原始数据集合，包含Grouping和Count属性
var highChartsData = originalData.Select(item => new PieChartItem
{
    name = item.Grouping,
    y = item.Count,
    drilldown = item.Grouping
}).ToList();
// 直接将highChartsData作为接口返回值即可，序列化后完全符合HighCharts要求的结构

方案2：前端JavaScript转换 #

如果后端接口不方便修改，可以在前端拿到数据后做转换：

// 假设originalData是接口请求返回的原始数据数组
const highChartsData = originalData.map(item => ({
  name: item.Grouping,
  y: item.Count,
  // 无下钻需求可赋值为空字符串
  drilldown: item.Grouping
}))
// 转换后直接把highChartsData传给HighCharts的series.data配置项即可

转换后示例输出 #

[
  {
    "name": "Label0",
    "y": 71,
    "drilldown": "Label0"
  },
  {
    "name": "Label1",
    "y": 44,
    "drilldown": "Label1"
  },
  {
    "name": "Label2",
    "y": 18,
    "drilldown": "Label2"
  },
  {
    "name": "Label3",
    "y": 34,
    "drilldown": "Label3"
  }
]

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