Highcharts拖拽选区后数据点不显示及选区内数据点获取问题排查

问题现象 #

开发折线图时，通过拖拽选区缩放后，选区内无数据点显示，过滤数据时返回空数组。需求是缩放至选区后显示对应数据点并统计数量。

代码分析 #

核心代码片段：

let options = {
  ...
  xAxis: {
    type: 'datetime',
  },
  chart: {
    zoomType: 'x',
    events: {
      selection: (event) => {
        if (event.resetSelection) {
          this.$nextTick(() => {
            this.range = null
            this.update()
          })
        } else {
          console.log(event.xAxis[0].min, event.xAxis[0].max)
          this.range = [event.xAxis[0].min, event.xAxis[0].max]
          // 日志输出：[1663201200530.95 1663207868319.1133]
          this.update()
        }
      },
    },
  },
}

const update = () => {
  // 过滤后无符合条件的数据点
  const filterData = data.filter(item => !this.range || (this.range &&
    new Date(item.timestamp).getTime() >= this.range[0] &&
    new Date(item.timestamp).getTime() <= this.range[1]
  ))

  const newData = filterData.map((item) => {
    return {
      x: new Date(item.timestamp), // 数据时间戳：1663079619410
      y: Number(item.score),
    }
  })

  const serieses = [{
      data: newData,
      zoneAxis: 'x',
      zones: newData.map((element) => ({
        value: element.x
      })),
    },
    ...
  ]

  options[series] = serieses // 此处存在语法错误
}

原因定位 #

1. 时间范围不匹配
   从日志可见，选区的时间范围（1663201200530+）远大于数据的时间戳（1663079619410），说明你选的区域完全在数据的时间范围之外，自然过滤不到数据。
   大概率是因为Highcharts的datetime轴默认使用UTC时间，而你的数据时间戳是本地时间，导致视觉上的选区和实际数据的时间范围错位。

2. 代码语法错误
   更新series时使用了options[series] = serieses，但series未定义为变量，正确写法应为options.series = serieses，否则无法正确更新图表数据。

3. 冗余时间转换
   如果item.timestamp已经是数字类型的时间戳，无需通过new Date(item.timestamp).getTime()转换，直接使用item.timestamp即可，避免潜在的转换错误。

修复方案 #

1. 统一时间处理逻辑 #

如果数据使用本地时间，关闭Highcharts的UTC模式：

xAxis: {
  type: 'datetime',
  UTC: false // 使用本地时间而非UTC
}

或在生成数据时将本地时间转换为UTC时间戳：

// 假设item.timestamp是本地时间字符串或时间戳
const utcTimestamp = new Date(item.timestamp).getTime() + (new Date().getTimezoneOffset() * 60 * 1000);

2. 修正过滤逻辑 #

简化时间戳对比，避免冗余转换：

const filterData = data.filter(item => !this.range || (
  item.timestamp >= this.range[0] &&
  item.timestamp <= this.range[1]
));

3. 修复series更新语法 #

// 原错误写法
// options[series] = serieses
// 修改为
options.series = serieses;

4. 确保图表正确更新 #

仅修改options对象不会自动更新图表，需调用Highcharts实例的update方法：

// 假设你持有chart实例
chart.update(options);

5. 验证时间范围匹配 #

在代码中打印具体日期，确认选区和数据的时间是否对应：

// 在selection事件中添加
console.log('选区时间:', new Date(event.xAxis[0].min), new Date(event.xAxis[0].max));
console.log('数据时间:', new Date(data[0].timestamp));

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