Chart.js v4雷达图最值异常求助：无法固定0为中心、6为最大值

使用Chart.js v4绘制雷达图时，期望图表中心为0、最高点为6，但实际中心值处于0-3之间（随数据集最小值变化），最大值处于5-6之间。已设置min=0、max=6和beginAtZero=true，问题仍未解决，以下是排查和修正方案：

核心排查点 #

• 检查数据集范围：确认data数组内所有值都在0-6区间内，若存在超出范围的数值，Chart.js会自动扩展刻度范围以覆盖数据，导致手动设置的min/max失效。
• 修正刻度范围配置位置：Chart.js v4中，雷达图的min和max需直接配置在scales.r根对象下，而非ticks子对象中。当前代码将这两个属性放在ticks里，属于配置位置错误。
• 清理冗余配置：显式设置min=0后，beginAtZero属性可移除，避免配置冲突。
• 验证画布上下文：确保canvas是有效DOM元素，getContext('2d')返回正常上下文，防止图表初始化异常导致配置不生效。

修正后的配置代码 #

const config = {
    type: "radar",
    data: {
        labels: data,
        datasets: [{
            data: data,
            backgroundColor: "rgba(255, 255, 255, 0.36)",
            borderColor: "white",
            borderWidth: 3
        }]
    },
    options: {
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            r: {
                min: 0,
                max: 6,
                angleLines: {
                    display: true
                },
                ticks: {
                    stepSize: 1,
                    color: "black",
                    font: {
                        size: 20
                    }
                },
                pointLabels: {
                    color: "black",
                    font: {
                        size: 20
                    },
                    backdropColor: "rgba(255, 255, 255, 0.75)",
                    backdropPadding: 6
                },
                grid: {
                    circular: true
                }
            }
        },
        elements: {
            line: {
                backgroundColor: "rgba(0, 0, 0, 0)"
            }
        },
    }
};

const ctx = canvas.getContext('2d');
new Chart(ctx, config);

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