Canvas JS图表多数据系列绘制问题：Controller代码调试求助

你遇到的核心问题很明确：把三个数值拼接成字符串赋值给y字段，导致Canvas JS无法解析数据——Canvas JS的y字段要求是数值类型（int/float），而不是字符串，所以这种写法会直接让图表渲染失败。

下面针对你的需求，提供两种可行的实现方案：

方案1：将三组数据作为独立系列显示（推荐） #

如果希望三个数据组分别以三条线/三组点的形式展示（每个系列对应一个GraphPoints字段），需要构建包含多个系列的JSON结构，而不是把三个值塞进同一个y里。

修改Controller代码如下：

public ActionResult Graph(int machineId)
{
    using (var db = new DatabaseModel())
    {
        var sheets = db.Checksheets
            .Where(s => s.MachineId == machineId)
            .ToList();

        // 构建三个独立的数据系列
        var seriesData = new List<object>
        {
            new {
                name = "GraphPoints",
                dataPoints = sheets.Select(s => new {
                    label = $"O: {s.OrderNum} P: {s.PartNum}",
                    y = s.GraphPoints
                }).ToList()
            },
            new {
                name = "GraphPoints1",
                dataPoints = sheets.Select(s => new {
                    label = $"O: {s.OrderNum} P: {s.PartNum}",
                    y = s.GraphPoints1
                }).ToList()
            },
            new {
                name = "GraphPoints2",
                dataPoints = sheets.Select(s => new {
                    label = $"O: {s.OrderNum} P: {s.PartNum}",
                    y = s.GraphPoints2
                }).ToList()
            }
        };

        return Json(seriesData, JsonRequestBehavior.AllowGet);
    }
}

前端Canvas JS的配置只需直接加载多系列数据即可：

$.getJSON("/YourController/Graph?machineId=XXX", function(seriesData) {
    var chart = new CanvasJS.Chart("chartContainer", {
        axisY: { title: "数值" },
        data: seriesData
    });
    chart.render();
});

方案2：同标签下显示三个数据点 #

如果希望在同一个Checksheet标签下显示三个数据点（同一x轴位置对应三个Y值），需要把每个Checksheet的三个数值拆分为独立的数据条目：

public ActionResult Graph(int machineId)
{
    using (var db = new DatabaseModel())
    {
        var sheets = db.Checksheets
            .Where(s => s.MachineId == machineId)
            .ToList();

        var dataPoints = new List<object>();
        foreach(var sheet in sheets)
        {
            var baseLabel = $"O: {sheet.OrderNum} P: {sheet.PartNum}";
            // 拆分三个数值为独立数据点
            dataPoints.Add(new { label = baseLabel, y = sheet.GraphPoints });
            dataPoints.Add(new { label = baseLabel, y = sheet.GraphPoints1 });
            dataPoints.Add(new { label = baseLabel, y = sheet.GraphPoints2 });
        }

        return Json(dataPoints, JsonRequestBehavior.AllowGet);
    }
}

这种方式下，同一个标签会对应三个点，图表会在同一x轴位置展示三个数值。

关键注意事项 #

• 始终确保y字段的类型是数值（int/float），绝对不要拼接成字符串，否则Canvas JS无法识别数据；
• 从你的表结构示例来看，三个GraphPoints字段都是单独的数值类型，直接赋值即可，不需要额外转换。

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