看来你遇到了时间轴下注解定位不准的典型问题——时间序列的x轴是datetime类型，和普通数值轴的坐标逻辑完全不一样，直接用常规数值设置x坐标就会导致注解跑到左下角，这是因为Highcharts对时间轴的坐标是基于毫秒级时间戳来计算的，不是数据点的索引或者普通数字。

下面给你几个针对性的解决方案，帮你精准定位关键数据点：

1. 直接绑定目标数据点（最可靠） #

如果你知道要标注的具体数据点，可以直接把它的时间戳（x值）和数值（y值）绑定到注解的point配置里，同时指定对应的坐标轴：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime', // 确认x轴是时间类型
    title: { text: '时间' }
  },
  series: [{
    name: '业务数据',
    data: [
      [1690000000000, 45],  // [时间戳(毫秒), 数值]
      [1690864000000, 78],  // 要标注的关键数据点
      [1691728000000, 52]
    ]
  }],
  // 正确的注解配置
  annotations: [{
    labels: [{
      point: {
        x: 1690864000000, // 对应关键数据点的时间戳
        y: 78,            // 对应关键数据点的y值
        xAxis: 0,         // 指定x轴索引（默认0）
        yAxis: 0          // 指定y轴索引（默认0）
      },
      text: '月度峰值：78',
      align: 'right',     // 文本相对于数据点的水平对齐
      verticalAlign: 'top',// 文本相对于数据点的垂直对齐
      y: -10,             // 额外垂直偏移（避免挡住数据点）
      padding: 6,
      style: {
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#ff0000'
      }
    }]
  }]
});

2. 动态获取并标注关键数据点 #

如果需要自动找到最大值/最小值这类关键点，可以借助图表的load事件，在图表渲染完成后动态添加注解：

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function() {
        // 获取第一个系列的所有数据点
        const seriesData = this.series[0].data;
        // 找到y值最大的数据点
        const maxPoint = seriesData.reduce((prev, curr) => prev.y > curr.y ? prev : curr);
        
        // 动态添加注解
        this.addAnnotation({
          labels: [{
            point: {
              x: maxPoint.x,
              y: maxPoint.y,
              xAxis: 0,
              yAxis: 0
            },
            text: `最高值：${maxPoint.y}`,
            align: 'left',
            verticalAlign: 'bottom',
            y: 10,
            style: {
              backgroundColor: 'rgba(255,255,255,0.8)',
              borderColor: '#333',
              borderWidth: 1
            }
          }]
        });
      }
    }
  },
  xAxis: { type: 'datetime' },
  series: [{
    name: '业务数据',
    data: [[1690000000000,45],[1690864000000,78],[1691728000000,52]]
  }]
});

常见坑点提醒 #

• 必须确保注解的x值是毫秒级时间戳：如果你的原始数据用的是日期字符串（比如'2023-07-22'），需要先转成时间戳再传入，否则Highcharts无法正确解析位置。
• 避免直接用数据点的索引作为x坐标：时间轴的坐标不是按数据点顺序排列的，索引值和实际时间轴的坐标完全不匹配，这就是注解跑到左下角的核心原因。
• 调整垂直位置：如果注解和数据点重叠，可以通过label的y属性设置偏移量（正数向下，负数向上），配合verticalAlign来优化显示效果。

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