如何在HighCharts的两个数据点之间添加自定义框

这个UI效果完全可以通过HighCharts实现，以下是两种可行的实现思路：

方案一：使用Renderer API手动绘制 #

利用HighCharts内置的renderer工具，在图表加载和重绘时，基于目标数据点的坐标计算自定义框的位置并绘制：

• 在chart.events.load和chart.events.redraw事件中执行绘制逻辑，确保图表缩放、平移后元素能正确更新位置
• 通过chart.series[0].points[index].plotX和plotY获取目标数据点的像素坐标
• 计算两个点连线的中点坐标，以此为基准调整自定义框的位置
• 用chart.renderer.rect()绘制矩形框，chart.renderer.text()添加框内文本，最后调用add()方法将元素挂载到图表容器

关键代码示例：

chart: {
  events: {
    load: function() {
      const chart = this;
      const point1 = chart.series[0].points[0];
      const point2 = chart.series[0].points[1];
      // 计算中点坐标
      const midX = (point1.plotX + point2.plotX) / 2;
      const midY = (point1.plotY + point2.plotY) / 2;
      // 绘制矩形框
      const box = chart.renderer.rect(midX - 40, midY - 20, 80, 40)
        .attr({
          fill: '#fff',
          stroke: '#000',
          'stroke-width': 1,
          zIndex: 5
        })
        .add();
      // 添加文本
      chart.renderer.text('自定义文本', midX, midY + 5)
        .attr({
          align: 'center',
          zIndex: 6
        })
        .add();
    },
    redraw: function() {
      // 重绘时重复上述绘制逻辑（需先清除旧元素）
    }
  }
}

方案二：使用Annotations插件（推荐） #

HighCharts的Annotations模块支持自定义标注，能更便捷地实现这种需求，且自带重绘、响应图表交互的能力：

• 引入Annotations插件（若使用CDN需额外引入对应脚本）
• 在annotations配置项中创建标注，通过坐标计算或关联数据点定位到两个点的中间区域
• 自定义标注的形状为矩形，并添加文本内容

关键代码示例：

annotations: [{
  labels: [{
    point: {
      xAxis: 0,
      yAxis: 0,
      x: (point1.x + point2.x) / 2,
      y: (point1.y + point2.y) / 2
    },
    shape: 'rect',
    style: {
      fill: '#fff',
      stroke: '#000'
    },
    text: '自定义文本',
    align: 'center',
    verticalAlign: 'middle'
  }]
}]

注意：使用Annotations时，若需要动态计算位置，可在图表加载后通过chart.annotations[0].update()方法调整标注的定位参数。

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