Chart.js v2.9.3雷达图刻度最值与圆形网格配置不生效

问题描述 #

使用Chart.js绘制雷达图时，尝试配置scale的min/max属性指定刻度范围为0-100，同时配置circular属性启用圆形网格，两项配置均未正常生效。
相关实现代码如下：

const chart1 = new Chart($('#chart-area1'), {
    type: 'radar',
    data: {
        labels: ['test1', 'test2', 'test3'],
        datasets: [{
            label: '1',
            data: [20, 25, 55],
            borderColor: setup_borderColor[0],
            backgroundColor: setup_backgroundColor[0],
            borderWidth: 1
        },{
            label: '2',
            data: [25, 35, 40],
            borderColor: setup_borderColor[1],
            backgroundColor: setup_backgroundColor[1],
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            min: 0,
            max: 100,
        },
        scales: {
            r: {
                grid: {
                    circular: true
                }
            }
        }
    }
});

预期效果为雷达图刻度起始值为0、最大值为100，且网格呈现圆形样式，实际运行未达到预期，运行效果如下：

当前使用的Chart.js版本为v2.9.3。

问题成因 #

配置不生效的核心原因是使用了Chart.js v3+版本的API写法，与当前v2.9.3版本的配置规范不兼容：

• v2.9.3版本的雷达图仅支持单根径向轴，所有轴相关配置统一挂载在options.scale节点下，不存在v3版本引入的options.scales.r多轴命名空间，额外添加的scales配置块会干扰原有scale配置的解析，导致min/max规则失效。
• v2版本中控制网格样式的属性挂载在scale.gridLines节点下，不存在v3版本的grid配置节点，因此circular: true的配置写在错误路径下无法被识别。

修复方案 #

移除不兼容的v3版本配置块，将所有轴配置统一放在options.scale节点下，使用v2版本对应的属性名即可，修正后的配置代码如下：

const chart1 = new Chart($('#chart-area1'), {
    type: 'radar',
    data: {
        labels: ['test1', 'test2', 'test3'],
        datasets: [{
            label: '1',
            data: [20, 25, 55],
            borderColor: setup_borderColor[0],
            backgroundColor: setup_backgroundColor[0],
            borderWidth: 1
        },{
            label: '2',
            data: [25, 35, 40],
            borderColor: setup_borderColor[1],
            backgroundColor: setup_backgroundColor[1],
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            min: 0,
            max: 100,
            // v2版本圆形网格配置归属gridLines节点
            gridLines: {
                circular: true
            }
        }
    }
});

注：如果后续升级到Chart.js v3及以上版本，才需要使用scales.r嵌套的配置写法，跨版本复制配置时需要注意API差异。

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