Highcharts Y轴值绑定异常：仅首个数组值显示正常

问题原因 #

你在Y轴配置了categories，这会把Y轴设置为分类轴，此时轴上的每个类别对应索引0、1、2、3。而你的series数据是[9,7,3,9]这类大于3的数值，Highcharts会把这些数值当作分类索引去匹配，但你的categories只有4个（索引0-3），超出范围的索引无法找到对应类别，导致显示异常。

两种解决方案 #

方案1：Y轴为分类轴（离散类别） #

如果你的Y轴确实是离散的分类（比如仅展示1ms、5ms、10ms、15ms这几个固定选项），需要把series的data改成对应类别的索引值：

chartOptionsLine: any = {
  yAxis: {
    categories: ['1 ms', '5 ms', '10 ms', '15 ms'],
    title: { enabled: true, text: '' }
  },
  plotOptions: {
    series: {
      marker: { enabled: false, states: { hover: { enabled: false } } }
    }
  },
  legend: { enabled: false },
  xAxis: {
    categories: ['12 am', '1 am', '2 am', '3 am'],
    title: { enabled: true, text: '' }
  },
  title: { floating: true, text: "" },
  series: [
    {
      name: 'Server',
      type: "line",
      color: '#FF0000',
      data: [3, 2, 0, 3] // 对应15ms、10ms、1ms、15ms的索引
    },
    {
      name: 'Success',
      type: "line",
      color: '#3f9546',
      data: [1, 0, 3, 1] // 对应5ms、1ms、15ms、5ms的索引
    }
  ]
};

方案2：Y轴为数值轴（带自定义标签） #

如果你的Y轴是数值轴（需要展示任意数值，仅给特定刻度添加自定义标签），不要用categories，改用tickPositions和labels.formatter：

chartOptionsLine: any = {
  yAxis: {
    tickPositions: [1, 5, 10, 15], // 指定要显示的刻度数值
    labels: {
      formatter: function() {
        return `${this.value} ms`; // 给刻度添加单位
      }
    },
    title: { enabled: false }
  },
  plotOptions: {
    series: {
      marker: { enabled: false, states: { hover: { enabled: false } } }
    }
  },
  legend: { enabled: false },
  xAxis: {
    categories: ['12 am', '1 am', '2 am', '3 am'],
    title: { enabled: true, text: '' }
  },
  title: { floating: true, text: "" },
  series: [
    {
      name: 'Server',
      type: "line",
      color: '#FF0000',
      data: [9, 7, 3, 9] // 数值正常映射到数值轴
    },
    {
      name: 'Success',
      type: "line",
      color: '#3f9546',
      data: [4, 2, 8, 4]
    }
  ]
};

总结 #

• 分类轴（categories）适用于离散的、固定数量的类别，data必须是类别对应的索引
• 数值轴适用于连续/任意数值的场景，通过tickPositions和formatter实现自定义刻度标签

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