Razor Pages中使用JsonResult数据时CanvasJS图表无法渲染问题

1. 后端接口返回值错误 #

你当前的代码是先把List<DataPoint>序列化成JSON字符串，再把这个字符串塞进JsonResult返回，等于前端收到的是一串纯文本字符串，不是可直接遍历的JSON数组，这是图表无数据的核心原因。

修正后端OnGetChartData方法，直接返回数据集合即可，不需要手动做序列化：

public JsonResult OnGetChartData()
{
    DateTime sTime = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
    var dataPoints = new List<DataPoint>
    {
        new DataPoint((long)(DateTime.Now - sTime).TotalMilliseconds, 2500),
        new DataPoint((long)(DateTime.Now.AddDays(1) - sTime).TotalMilliseconds, 2600),
        new DataPoint((long)(DateTime.Now.AddDays(2) - sTime).TotalMilliseconds, 2700)
    };
    // 直接返回数据集合，让框架自动完成JSON序列化
    return new JsonResult(dataPoints, new JsonSerializerSettings 
    { 
        NullValueHandling = NullValueHandling.Ignore 
    });
}

2. 前端AJAX逻辑错误 #

你将图表初始化和render方法写在了for循环内部，每新增一个数据点就会重新创建一次图表实例，逻辑不规范。需要把这部分代码移到循环外部，等所有数据点组装完成后再初始化渲染图表：

$.ajax({
    method: 'get',
    url: '/SPC/Index2?handler=ChartData',
    contentType: "application/json",
    dataType: "json",
    success: function (data) {
        var dataPoints = [];
        // 先遍历所有返回数据组装dataPoints
        for (var i = 0; i < data.length; i++) {
            dataPoints.push({
                x: new Date(data[i].x),
                y: data[i].y
            });
        }
        // 数据准备完成后再初始化、渲染图表
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            title: {
                text: "My Test Chart"
            },
            axisX: {
                valueFormatString: "DD MMM"
            },
            axisY: {
                title: "Sales (in USD)",
                prefix: "$"
            },
            data: [{
                type: "spline",
                xValueType: "dateTime",
                xValueFormatString: "DD MMM",
                yValueFormatString: "$#,###",
                dataPoints: dataPoints
            }]
        });
        chart.render();
    }
});

<div id="chartContainer" style="height: 370px; width: 100%;"> 
</div>

可选验证步骤 #

如果修复后还是无法显示数据，可以在success回调第一行添加console.log(data)，查看Chrome控制台输出的data格式是否为预期的数组结构，确认后端返回数据正常。

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