Chart.js：实现柱状图分类网格任意区域点击获取x轴数值

要实现点击柱状图网格内任意区域都能获取对应x轴数值，你可以利用Chart.js提供的坐标轴像素值转换能力，直接通过点击位置计算对应的x轴索引，无需依赖点击到柱状条元素。

修改后的代码 #

this.fireProgressionChart = new Chart(this.fireProgressionCanvas.nativeElement, {
    data: {
      datasets: [
      {
        type: 'bar',
        label: 'Expenses',
        data: [],
        backgroundColor: 'rgb(178, 69, 69)',
      }, 
      {
        type: 'bar',
        label: 'Passive Income',
        backgroundColor: 'rgb(12, 133, 75)',
        data: [],
      },
      {
        type: 'bar',
        label: 'Asset + Passive Income',
        backgroundColor: 'rgb(49, 74, 138)',
        data: [],
      }
    ],
    labels: this.getNwProgressionLabels(),
  },
  options: {
    onClick: (event, elements) => {
      const chart = this.fireProgressionChart;
      // 获取x轴实例（Chart.js v3+ 默认id为'x'，v2版本请改为'x-axis-0'）
      const xScale = chart.scales.x;
      // 通过点击的水平像素值，计算对应的x轴索引
      const clickedIndex = xScale.getValueForPixel(event.offsetX);
      
      // 校验索引是否有效（在labels范围内）
      if (clickedIndex !== null && clickedIndex >= 0 && clickedIndex < chart.data.labels.length) {
        const age = chart.data.labels[clickedIndex];
        this.updateFireGapData(age);
      }
    }
  }
})

关键说明 #

• xScale.getValueForPixel(event.offsetX)：这个方法会将点击位置的水平像素值转换为对应的x轴数据索引，无论点击的是柱状条还是网格空白区域，只要在x轴的有效范围内都能得到正确索引。
• 边界校验：增加索引有效性判断，避免点击图表外部区域时触发无效操作。
• 版本兼容：如果使用Chart.js v2版本，x轴的id是x-axis-0，需要把chart.scales.x改为chart.scales['x-axis-0']。

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