React中使用Highcharts绘制折线图时如何获取选中的年份范围

你可以通过以下两种常用方式实现需求：

方法1：监听afterSetExtremes事件（推荐） #

该事件会在x轴区间发生变化（拖动滑块、缩放、切换时间范围）时自动触发，可直接拿到当前区间的极值：
如果你的x轴为时间类型，参考如下配置：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    events: {
      afterSetExtremes: function(e) {
        // e.min和e.max为当前区间的毫秒级时间戳
        const startYear = new Date(e.min).getFullYear()
        const endYear = new Date(e.max).getFullYear()
        // 此处编写你的业务逻辑
        console.log('当前年份区间：', `${startYear}-${endYear}`)
      }
    }
  },
  // 其余图表配置项
})

如果你的x轴为分类类型（categories直接存储年份值），参考如下写法：

afterSetExtremes: function(e) {
  // 取整后匹配分类数组的索引
  const startYear = this.categories[Math.round(e.min)]
  const endYear = this.categories[Math.round(e.max)]
  console.log('当前年份区间：', `${startYear}-${endYear}`)
}

方法2：主动调用API获取区间 #

如果需要在非事件触发场景下主动查询当前区间，可调用getExtremes()方法：

// 先获取图表实例
const chart = Highcharts.chart('container', { /* 你的图表配置 */ })
// 主动查询时调用
const extremes = chart.xAxis[0].getExtremes()
const startYear = new Date(extremes.min).getFullYear()
const endYear = new Date(extremes.max).getFullYear()

注意事项 #

• 如果你使用的是Highstock自带的范围滑块（rangeSelector），以上两种方案均兼容，无需额外适配
• 时间类型x轴返回的min/max为13位毫秒时间戳，需转换后再提取年份
• 分类类型x轴返回的min/max为浮点数，建议取整后再匹配分类数组索引

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