如何在Highcharts中实现任意两点之间的红色条形块展示

以下提供两种适配不同需求的实现方式：

方案1：使用xAxis.plotBands（无需额外引入模块） #

适合需要红色条形块覆盖全图表垂直高度，作为背景区间标注的场景，配置最简单。
固定写在配置里的示例代码：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime', // x轴为时间类型必须加该配置
    plotBands: [
      {
        from: Date.UTC(2024, 0, 1, 10, 25), // 区间起始时间的时间戳
        to: Date.UTC(2024, 0, 1, 10, 35), // 区间结束时间的时间戳
        color: 'rgba(255, 0, 0, 0.3)', // 半透明红色，可直接写'red'实现不透明效果
        label: {
          text: '目标区间' // 可选，给区间加标注文字
        }
      }
    ]
  },
  // 其余原有图表配置保持不变
})

如果需要运行时动态新增区间，调用API即可：

// chart为你的图表实例
chart.xAxis[0].addPlotBand({
  from: 起始时间戳,
  to: 结束时间戳,
  color: 'red'
})

方案2：使用xrange系列（需引入xrange扩展模块） #

适合需要自定义红色条形块的高度、y轴位置，不需要覆盖全图表高度的场景，灵活度更高。
首先引入xrange模块：

// 通用引入方式，按需适配你的项目引入规范
import Highcharts from 'highcharts'
import XrangeModule from 'highcharts/modules/xrange'
XrangeModule(Highcharts)

配置示例：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [
    // 新增的区间条形块系列
    {
      type: 'xrange',
      name: '区间标注',
      color: 'red',
      pointWidth: 20, // 自定义条形块的高度
      data: [
        {
          x: Date.UTC(2024, 0, 1, 10, 25), // 起始时间戳
          x2: Date.UTC(2024, 0, 1, 10, 35), // 结束时间戳
          y: 10 // 条形块在y轴上的位置，可自定义
        }
      ]
    },
    // 你的原有数据系列，保持不变即可
    {
      type: 'line',
      name: '原始数据',
      data: []
    }
  ]
})

动态添加新的区间条调用addPoint方法即可：

chart.series[0].addPoint({
  x: 起始时间戳,
  x2: 结束时间戳,
  y: 目标y轴位置
})

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