如何在HighCharts图表上方标注最大值与最小值？求实现方案

有两种可行方案，不管是用HighCharts内部API还是外部HTML都能实现需求：

一、HighCharts内部实现（推荐） #

不用依赖外部HTML，直接利用HighCharts的渲染API在图表内部添加标注：

1. 先计算出数据的最大值和最小值：

const data = [12, 34, 56, 23, 78, 45]; // 替换成你的图表数据
const maxVal = Math.max(...data);
const minVal = Math.min(...data);

2. 在图表配置的chart.events.load事件里，用renderer.text()绘制标注文本，通过x/y坐标定位到图表上方：

chart: {
  events: {
    load: function() {
      const chart = this;
      // 绘制最大值标注，x/y坐标可根据图表实际布局调整
      chart.renderer.text(`最大值: ${maxVal}`, chart.plotLeft + chart.plotWidth - 100, chart.plotTop - 20)
        .css({ color: '#333', fontSize: '14px' })
        .add();
      // 绘制最小值标注
      chart.renderer.text(`最小值: ${minVal}`, chart.plotLeft + 20, chart.plotTop - 20)
        .css({ color: '#333', fontSize: '14px' })
        .add();
    }
  }
}

这种方式的优势是标注会和图表联动，比如图表缩放、重绘时，可通过redraw事件同步调整位置。

二、外部HTML实现 #

如果不想修改HighCharts核心配置，也可以在图表容器外单独添加HTML元素展示：

1. 在页面中添加一个与图表容器同宽的div，用于放置标注：

<div id="chart-annotations" style="width: 600px; margin-bottom: 5px; display: flex; justify-content: space-between; padding: 0 10px;">
  <span id="min-value"></span>
  <span id="max-value"></span>
</div>
<div id="container"></div> <!-- HighCharts图表容器 -->

2. 计算数据最值后，将值插入到对应的span标签中：

const data = [12, 34, 56, 23, 78, 45];
const maxVal = Math.max(...data);
const minVal = Math.min(...data);

document.getElementById('min-value').textContent = `最小值: ${minVal}`;
document.getElementById('max-value').textContent = `最大值: ${maxVal}`;

这种方式更简单，适合不需要和图表交互联动的场景，只需保证标注div的宽度和图表容器一致、样式对齐即可。

内容的提问来源于stack exchange，提问作者Guilherme Lemos Villela