Chart.js柱状图Y轴值显示异常（ASP.NET Core动态加载场景）

在ASP.NET Core中使用Chart.js动态加载柱状图，尝试从JSON对象中填充Y轴值，但Y轴始终显示为1。需求是X轴展示Day字段，Y轴展示TotalActual字段，以下是初始代码及更新后的代码：

初始代码 #

var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
console.log(WeeklyData);

let weeklylabels = [...new Set(WeeklyData.map((x) => x.Day))];
console.log(weeklylabels);

var weeklydatasets = WeeklyData.map(y => y.TotalActual);

var barChartDataWeekly = {
    labels: weeklylabels,
    datasets: [{
        data: weeklydatasets,
        backgroundColor: [
            'rgba(0, 154, 221, 1)'                    
        ]
    }],
};

window.onload = function () {
    var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
    window.myBar = new Chart(ctxUPHHistory, {
        type: 'bar',
        data: barChartDataWeekly,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    ticks: {
                        beginAtZero: true,
                        stepSize:50
                        //// Include a dollar sign in the ticks
                        //callback: function (value, index, ticks) {
                        //    return value + '%';
                        //}
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
};

更新后代码 #

var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
console.log(WeeklyData);

let weeklylabels = [...new Set(WeeklyData.map((x) => x.Day))];
console.log(weeklylabels);

let weeklydatasets = (WeeklyData.map((y) => y.TotalActual));
console.log(weeklydatasets);

var barChartDataWeekly = {
    labels: weeklylabels,
    datasets: [{
        data: WeeklyData,
        backgroundColor: [
            'rgba(0, 154, 221, 1)'                    
        ]
    }],
};

window.onload = function () {
    var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
    window.myBar = new Chart(ctxUPHHistory, {
        type: 'bar',
        data: barChartDataWeekly,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            parsing: {
                xAxisKey: 'Day',
                yAxisKey: 'TotalActual'
            },
            scales: {
                y: {
                    ticks: {
                        beginAtZero: true,
                        stepSize:50
                        //// Include a dollar sign in the ticks
                        //callback: function (value, index, ticks) {
                        //    return value + '%';
                        //}
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
};

解决方法 #

1. 排查数据类型问题 #

首先检查TotalActual字段的数据类型：如果后端序列化后该字段是字符串类型，Chart.js会无法正确解析为数值，导致Y轴显示异常。可以在前端强制转换为数字：

// 将TotalActual转为数字类型
WeeklyData.forEach(item => {
    item.TotalActual = Number(item.TotalActual);
});

2. 修正数据配置冲突 #

更新后的代码中同时设置了labels和parsing选项，这会导致Chart.js的数据匹配逻辑混乱。当使用parsing从对象中提取X/Y轴字段时，不需要手动设置labels，Chart.js会自动从data数组的xAxisKey生成X轴标签，并对应匹配yAxisKey的数值。

修正后的完整代码 #

var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
console.log(WeeklyData);

// 确保TotalActual是数字类型，兼容后端返回字符串的情况
WeeklyData.forEach(item => {
    item.TotalActual = Number(item.TotalActual);
});

var barChartDataWeekly = {
    datasets: [{
        data: WeeklyData,
        backgroundColor: 'rgba(0, 154, 221, 1)' // 所有柱子同色时，直接赋值单个颜色字符串即可
    }],
};

window.onload = function () {
    var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
    window.myBar = new Chart(ctxUPHHistory, {
        type: 'bar',
        data: barChartDataWeekly,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            parsing: {
                xAxisKey: 'Day',
                yAxisKey: 'TotalActual'
            },
            scales: {
                y: {
                    ticks: {
                        beginAtZero: true,
                        stepSize: 50
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
};

补充说明 #

• 如果WeeklyData中存在同一Day对应多个TotalActual的情况，需要先按Day分组求和，再传递给Chart.js，否则会出现同一X轴标签对应多个柱子的问题。
• 若所有柱子使用同一背景色，直接给backgroundColor赋值单个颜色字符串即可，无需数组。

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