ASP.NET MVC中如何在Chart.js的X轴动态显示Agent名称

直接针对你的问题给出修复方案，解决数据统计错误和X轴标签配置问题：

1. 修正Controller中的数据统计逻辑 #

当前代码里所有状态的Count()都没做过滤，导致每个Agent的Open/Closed/InProgress数值完全一致，必须按Deal状态区分统计：

var thisWeekAgentPerform = db.Clients
    .Where(x => DbFunctions.TruncateTime(x.CleitnCreatedDate) >= thisWeekMonday
             && DbFunctions.TruncateTime(x.CleitnCreatedDate) <= thisWeekSunday)
    .GroupBy(c => c.AgentUname)
    .Select(b => new ReportVM()
    {
        AgentName = b.Key,
        // 按实际状态字段过滤统计，替换成你项目里的状态值
        OpenClient = b.Count(c => c.DealStatus == "Open"),
        ClosedClient = b.Count(c => c.DealStatus == "Closed"),
        InProgressClient = b.Count(c => c.DealStatus == "InProgress"),
        CancelClient = b.Count(c => c.DealStatus == "Cancel")
    }).ToList();
ViewBag.AgentThisWeekPerform = thisWeekAgentPerform;

2. 修复jQuery中的X轴标签及变量问题 #

核心错误点： #

• labels: [AgentName] 错误地把数组嵌套在另一个数组里，导致X轴无法识别正确标签
• AgentName是字符串类型，push时需要加引号，避免被解析为JS变量
• 变量名重复：原代码中数组和数据集对象用了相同名字，会导致变量覆盖

修正后的jQuery代码：

var barCanvas = document.getElementById("barchart");

// 初始化数组，避免变量名冲突
var openClientData = [];
var closedClientData = [];
var inProgressClientData = [];
var agentNames = [];

@if (ViewBag.AgentThisWeekPerform.Count > 0)
{
    foreach (var item in ViewBag.AgentThisWeekPerform)
    {
        // 字符串类型必须加引号包裹
        @:agentNames.push("@item.AgentName");
        @:openClientData.push(@item.OpenClient);
        @:closedClientData.push(@item.ClosedClient);
        @:inProgressClientData.push(@item.InProgressClient);
    }
}

// 定义数据集，变量名和数组区分开
var openDataset = {
    label: 'OpenClient',
    data: openClientData,
    backgroundColor: 'rgb(255, 99, 132)',
    borderWidth: 0,
    lineTension: 0,
};
var closedDataset = {
    label: 'ClosedClient',
    data: closedClientData,
    backgroundColor: 'rgb(54, 162, 235)',
    borderWidth: 0,
};
var inProgressDataset = {
    label: 'InProgressClient',
    data: inProgressClientData,
    backgroundColor: 'rgb(157, 230, 41)',
    borderWidth: 0,
};

var datasetvalues = {
    labels: agentNames, // 直接传入数组，不要嵌套
    datasets: [openDataset, closedDataset, inProgressDataset]
};

var chartOptions = {
    scales: {
        xAxes: [{
            barPercentage: 1,
            categoryPercentage: 0.6,
        }],
        yAxes: [{
            barPercentage: 1,
            categoryPercentage: 0.6,
            ticks: {
                beginAtZero: true
            }
        }],
    }
};

var barChart = new Chart(barCanvas, {
    type: 'bar',
    data: datasetvalues,
    options: chartOptions
});

额外优化提示 #

• 状态字段建议用枚举：如果DealStatus是枚举类型，统计时用枚举值更严谨，避免字符串拼写错误
• 空数据处理：可以添加判断，如果agentNames为空，显示"暂无数据"提示而非空图表
• 变量命名规范：尽量用语义化的变量名，避免重复和混淆

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