Chart.js time类型X轴找不到minIndex与maxIndex属性怎么办

整体目标 #

需要实现两类关联功能：

• 获取图表当前可视区域内的数据点数组
• 基于拖拽高亮选中的缩放区域，提取对应范围内的y值集合，用于计算区域数值平均值

当前开发进度与遇到的障碍 #

• 参考分类（categorical）类型X轴的实现方案完成了大部分开发工作，但实际项目中使用的是时间（time）类型X轴，方案无法直接复用
• 排查控制台打印的X轴属性时发现：分类类型轴自带minIndex、maxIndex属性，可直接对应数据在源数组中的下标，完成数组切片操作
• 时间类型轴上不存在上述两个下标属性，仅能读取到时间戳格式的max、min边界值，无法直接用于数组切片
• 实际测试时间类型轴下的minIndex取值，返回值仅为0或1，完全不具备实用价值

时间类型X轴的实际属性结构 #

对标识为x-axis-0的时间类型X轴执行控制台输出后，提取到与问题相关的核心结构如下：

{
  id: "x-axis-0",
  type: "time",
  min: 1614922568591.0784, // 可视区域左边界的时间戳
  max: 1614922685400.2363, // 可视区域右边界的时间戳
  left: 35.781484375,
  right: 1107,
  _timestamps: {
    data: Array(3601), // 数据集对应的全量时间戳集合
    datasets: Array(2),
    labels: Array(3616)
  },
  _startPixel: 35.781484375,
  _endPixel: 1107,
  _unit: "hour"
}

测试验证结论 #

通过复现场景分别验证两类X轴的行为差异：

• 分类类型X轴的minIndex、maxIndex属性值与数据集数组下标完全匹配，可直接用于切片获取可见数据
• 时间类型X轴无对应下标属性，仅存的时间戳边界值需要匹配全量数据的时间戳序列，才能反推得到对应的数据下标

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