如何用Highcharts雷达图实现各Y轴独立最值的个人能力单组数据展示？

当然可以实现，Highcharts雷达图完全支持为不同能力维度设置自定义最大值，具体配置方法如下：

核心思路 #

雷达图的每个能力维度对应x轴的一个分类，我们可以通过将实际得分按比例映射到统一的0-100区间，同时在y轴标签上显示该维度的原始最大值刻度，既保证雷达形状准确反映能力完成度，又能展示各维度的不同上限。

代码示例 #

Highcharts.chart('container', {
    chart: {
        polar: true,
        type: 'line'
    },
    title: {
        text: '个人能力雷达图'
    },
    pane: {
        size: '80%'
    },
    xAxis: {
        categories: ['沟通能力', '技术能力', '创新能力', '协作能力'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },
    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        max: 100, // 统一相对最大值
        labels: {
            formatter: function() {
                // 定义各维度的原始最大值
                const dimensionMax = {
                    '沟通能力': 30,
                    '技术能力': 100,
                    '创新能力': 25,
                    '协作能力': 80
                };
                // 获取当前刻度对应的维度
                const currentCategory = this.axis.chart.xAxis[0].categories[this.pos];
                // 计算并返回原始刻度值
                return (this.value / 100) * dimensionMax[currentCategory];
            }
        }
    },
    series: [{
        name: '个人能力',
        // 实际得分按比例转换为0-100的相对值
        data: [
            (27/30)*100,  // 沟通能力：27分（满分30）
            85,           // 技术能力：85分（满分100）
            (20/25)*100,  // 创新能力：20分（满分25）
            (70/80)*100   // 协作能力：70分（满分80）
        ],
        pointPlacement: 'on'
    }]
});

关键说明 #

• 数据处理：将每个能力的实际得分除以该维度的最大值，再乘以100，转换为相对百分比，确保雷达图的形状能准确反映各能力的完成比例。
• 标签格式化：通过yAxis.labels.formatter动态计算每个维度对应的原始刻度值，让用户看到的是实际的分数上限，而不是统一的100。
• 如果需要更直接的轴配置（无需比例转换），也可以利用Highcharts的多y轴特性，但上述方法更简洁，适合雷达图的场景。

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