ASP.NET MVC中Morris图表的数据解析与适配问题

首先直接给结论：你当前返回的JSON格式不符合Morris.Bar的数据要求，所以图表无法正常渲染。我来帮你一步步修正：

为什么当前格式不对？ #

Morris.js的柱状图要求数据是对象数组，每个对象代表一个独立的数据点，同时包含x轴（分类字段）和y轴（数值字段）。而你现在返回的是把日期和训练次数分成两个独立的数组，这种结构Morris无法直接识别。

你当前的JSON：

{"dates":["2018-06-01T00:00:00"],"exposures":[5]}

正确的格式应该是这样的：

[{"date":"2018-06-01","exposures":5}]

第一步：修正后端JSON返回格式 #

修改你的FetchAthleteChartData方法，将日期和训练次数配对，生成符合要求的对象数组：

[HttpGet]
public JsonResult FetchAthleteChartData(string coachId, string athleteId)
{
    var exerciseReport = _applicationUserOperations.GetAllExposureReportsForCoachByAthleteId(coachId, athleteId);
    // 将日期和次数配对，生成单个对象的数组
    var chartData = exerciseReport.Exposures.Select(x => new 
    {
        date = x.ExposureDate.ToString("yyyy-MM-dd"), // 格式化日期，去掉冗余的时间后缀
        exposures = x.NumberOfLifts
    }).ToList();
    
    return Json(chartData, JsonRequestBehavior.AllowGet); // ASP.NET MVC旧版本需添加AllowGet参数
}

第二步：修正前端JavaScript代码 #

你的前端存在两个关键问题：

1. 不必要的JSON.stringify和$.parseJSON——$.getJSON已经自动将响应解析为JavaScript对象，无需二次处理
2. xkey和ykeys配置颠倒：x轴应该对应日期字段，y轴对应训练次数字段

修改后的前端代码：

<div class="chart" id="bar-chart-@exposureReport.AthleteId" style="height: 300px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>
<script>
drawChart('@exposureReport.CoachId', '@exposureReport.AthleteId');

function drawChart(coachId, athleteId) {
    // 用对象形式传递参数，避免URL拼接的编码问题
    $.getJSON('@Url.Action("FetchAthleteChartData", "Reports")', { coachId: coachId, athleteId: athleteId }, function (data) {
        Morris.Bar({
            element: 'bar-chart-' + athleteId,
            resize: true,
            barSizeRatio: 0.12,
            barGap: 3,
            data: data, // 直接使用解析好的对象数组
            barColors: ['#ff0000'],
            xkey: 'date', // 对应后端返回的date字段
            ykeys: ['exposures'], // 对应后端返回的exposures字段
            labels: ['Times exposed'],
            hideHover: 'auto'
        });
    });
}
</script>

额外优化说明 #

• 把<script>从图表容器<div>中移出，确保DOM元素先加载完成再初始化图表，避免渲染异常
• 日期格式化后，x轴的显示会更简洁，不会出现T00:00:00的冗余后缀
• 用对象形式传递$.getJSON的参数，比直接拼接URL更安全，能自动处理特殊字符的编码问题

这样修改后，你的Morris柱状图应该就能正常显示日期与对应训练次数的关系了。

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