React中Chart.js点击空白区域获取对应元素索引的方法

问题场景 #

在React应用中使用Chart.js绘制柱状图时，若某一数据值远高于其他（例如January为100000，其余月份数据低于10000），小数据对应的柱子会因比例问题几乎完全不可见。此时点击可见的January柱子能正常获取索引0，但点击February等对应空白区域时，getElementAtEvent(barRef.current, event)[0]?.index返回undefined，无法拿到该分类的对应索引。

解决方案 #

方法1：使用getElementsAtEventForMode方法 #

Chart.js提供的getElementsAtEventForMode支持按指定模式检测点击区域，设置mode: 'index'并关闭intersect后，可检测对应x轴分类的整个区域，无论柱子是否可见都能返回索引。

修改点击事件处理函数如下：

const handleGetData = (event) => {
  const chart = barRef.current?.chart;
  if (!chart) return;

  // 获取相对于图表容器的点击坐标
  const point = chart.getRelativePosition(event);
  // 按index模式检测点击区域，不要求点击到图形元素
  const elements = chart.getElementsAtEventForMode(point, 'index', { intersect: false }, true);
  
  if (elements.length > 0) {
    console.log(elements[0].index);
  }
};

方法2：通过x轴刻度直接计算索引 #

直接利用x轴的getValueForPixel方法，将点击的x坐标转换为对应的分类索引：

const handleGetData = (event) => {
  const chart = barRef.current?.chart;
  if (!chart) return;

  const xAxis = chart.scales.x;
  const point = chart.getRelativePosition(event);
  // 根据点击x坐标获取对应索引
  const index = xAxis.getValueForPixel(point.x);
  
  // 校验索引有效性
  if (index >= 0 && index < labels.length) {
    console.log(index);
  }
};

原理说明 #

getElementAtEvent仅能识别存在实际图形元素（可见柱子）的点击，当柱子因数据过小被压缩至几乎不可见时，该方法无法检测到点击。而上述两种方法均基于x轴分类区域进行检测，不受柱子可见性影响，因此能在空白区域点击时返回对应索引。

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