ASP.Net MVC中JsonConvert序列化带双引号致HighChart饼图不显示如何解决

你对返回数据执行了两次JSON序列化：

1. 第一次手动调用JsonConvert.SerializeObject()把ChartData列表转成了JSON格式字符串
2. 第二次ASP.NET MVC的JsonResult对象会自动对传入的内容执行序列化，把你已经生成的JSON字符串再次包裹转义，最终前端拿到的就是带额外双引号的字符串，而非可直接识别的对象数组。

方案1：去掉手动序列化，直接把数据对象传给JsonResult（最推荐） #

不需要手动调用Newtonsoft的序列化方法，直接把ChartData集合作为JsonResult的数据源即可：

// 错误写法
var chartData = DataTableToChartDataList(dt); // 你的DataTable转列表方法
var jsonStr = JsonConvert.SerializeObject(chartData);
return Json(jsonStr, JsonRequestBehavior.AllowGet);

// 正确写法
var chartData = DataTableToChartDataList(dt);
return Json(chartData, JsonRequestBehavior.AllowGet);

方案2：需自定义序列化规则时，返回ContentResult而非JsonResult #

如果你需要配置序列化规则（比如日期格式化、驼峰命名等），手动序列化后直接返回字符串内容，指定响应类型为JSON即可：

var chartData = DataTableToChartDataList(dt);
var jsonStr = JsonConvert.SerializeObject(chartData, new JsonSerializerSettings
{
    DateFormatString = "yyyy-MM-dd",
    ContractResolver = new CamelCasePropertyNamesContractResolver()
});
return Content(jsonStr, "application/json");

前端临时兼容方案 #

如果暂时无法修改后端代码，可以在前端拿到响应后手动做一次反序列化：

$.ajax({
    url: '/你的接口路径',
    type: 'get',
    success: function(res) {
        // 字符串转对象数组
        var seriesData = typeof res === 'string' ? JSON.parse(res) : res;
        // 赋值给HighChart配置
        Highcharts.chart('容器ID', {
            chart: { type: 'pie' },
            series: seriesData
        })
    }
})

内容的提问来源于stack exchange，提问作者Dewan Tanvir Aziz