ASP.NET MVC中Chart.js无法渲染双数据集：仅Value数据显示

核心问题：变量名覆盖导致无法获取Age数据 #

你在AJAX的success回调里，用同名变量覆盖了原始返回的data（包含Date、Value、Age的完整数组）：

// 此处将原始data替换为仅含Value的数组
var data = data.map(function (e) {
  return e.Value;
});

// 此时data已经是Value数组，遍历它无法拿到Age属性，最终data2全为undefined
var data2 = data.map(function (e) {
  return e.Age;
});

修复方法 #

修改存储Value数据的变量名，避免覆盖原始数据源：

var labels = data.map(function (e) {
  return e.Date;
});

// 改用不同变量名存储Value数据
var valueData = data.map(function (e) {
  return e.Value;
});

// 遍历原始data，正确获取Age数据
var ageData = data.map(function (e) {
  return e.Age;
});

其他需要修复的问题 #

1. C#代码语法错误 #

C#是大小写敏感语言，DateTime.NOW需改为DateTime.Now：

public ActionResult GetLineChartData() 
{
    List<LineChartData> dataForLineChart = new List<LineChartData>();
    dataForLineChart.Add(new LineChartData {
        Date = DateTime.Now, Value = 100, Age = 20
    });
    return Json(dataForLineChart, JsonRequestBehavior.AllowGet);
}

2. JS配置语法错误 #

第一个dataset的label属性后缺少逗号，会导致配置解析失败；同时两个dataset使用相同label会导致图例无法区分，建议修改为不同名称：

datasets: [{
    label: "数值",
    data: valueData,
    backgroundColor: 'rgba(0, 119, 204, 0.3)'
  },
  {
    label: "年龄",
    data: ageData,
    backgroundColor: 'rgba(242, 204, 143, 1)'
  }
]

3. 缺少Chart实例化代码 #

仅定义配置对象但未创建Chart实例，需补充实例化代码：

// 确保获取到正确的canvas元素
var ctx = document.getElementById('scatterChart').getContext('2d');
// 实例化折线图
new Chart(ctx, config);

4. AJAX配置优化 #

若没有上传文件需求，需移除contentType: false和processData: false，否则可能导致服务器无法正常解析请求数据：

$.ajax({
  type: "Post",
  url: '@Url.Action("GetLineChartData", "Posts")',
  // 移除这两行非必要配置
  // contentType: false,
  // processData: false,
  data: dataFromForm,
  dataType: "json",
  traditional: true,
  success: function (data) {
    // ... 后续处理代码
  }
});

完整修复后的JS示例 #

$.ajax({
  type: "Post",
  url: '@Url.Action("GetLineChartData", "Posts")',
  data: dataFromForm,
  dataType: "json",
  traditional: true,
  success: function (data) {
    console.log(data);

    var labels = data.map(function (e) {
      return e.Date;
    });

    var valueData = data.map(function (e) {
      return e.Value;
    });

    var ageData = data.map(function (e) {
      return e.Age;
    });

    var ctx = document.getElementById('scatterChart').getContext('2d');

    var config = {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
            label: "数值",
            data: valueData,
            backgroundColor: 'rgba(0, 119, 204, 0.3)',
            borderColor: 'rgba(0, 119, 204, 1)',
            fill: true
          },
          {
            label: "年龄",
            data: ageData,
            backgroundColor: 'rgba(242, 204, 143, 0.3)',
            borderColor: 'rgba(242, 204, 143, 1)',
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

    new Chart(ctx, config);
  }
});

内容的提问来源于stack exchange，提问作者newhouse-pt