Highcharts蜘蛛图Y轴刻度顺序错误问题求助

我一眼就看出问题所在了——你在Y轴配置里同时混用了分类轴（categories）和数值轴的配置规则，这直接导致了刻度顺序混乱。

问题根源 #

当你给Y轴添加categories数组时，Highcharts会把这个轴当作分类轴处理，刻度的显示顺序完全遵循你传入的categories数组的顺序。但你这里的categories数组虽然是数值的字符串形式，却和你设置的数值轴规则（min:0、max:100、tickInterval:10）冲突了，Highcharts无法同时处理两种轴类型的逻辑，就出现了0、100、20这种错乱的刻度顺序。

解决方案 #

你有两种可行的修复方式，推荐第一种（更符合数值轴的使用场景）：

方案1：移除categories配置（推荐）

蜘蛛图的Y轴本质是数值轴，不需要手动指定分类。直接删掉categories数组，保留你的数值轴配置，Highcharts会自动根据min、max、tickInterval生成正确顺序的刻度：

yAxis: {
  gridLineInterpolation: "polygon",
  lineWidth: 0,
  min: 0,
  max: 100,
  tickInterval: 10,
  tickmarkPlacement: "on"
}

方案2：修正categories数组顺序（不推荐，仅用于特殊场景）

如果你确实需要使用categories（比如刻度不是纯数值），必须保证categories数组是严格按从小到大的顺序排列，并且可以去掉冲突的数值轴配置：

yAxis: {
  gridLineInterpolation: "polygon",
  lineWidth: 0,
  tickmarkPlacement: "on",
  categories: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
}

效果验证 #

用方案1修改后，Y轴刻度会严格按照0 → 10 → 20 → ... → 100的顺序显示，完全符合你的预期。

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