React中如何获取react-chartjs-2分组柱状图点击的柱子名称

我明白你遇到的困扰了——普通柱状图每个x轴刻度只有一根柱子，靠_index就能直接定位目标，但分组柱状图里每个x轴周期对应多根不同dataset的柱子，只拿x轴的_index确实没法区分具体点的是哪一根。别担心，咱们只需要利用点击事件返回的额外属性就能搞定！

关键思路：获取_datasetIndex属性 #

在分组柱状图的点击事件里，你拿到的arr数组中的data对象，除了_index（x轴周期的索引），还有一个_datasetIndex属性——这个就是当前点击的柱子所属的dataset的索引，也就是分组里的具体柱子序号。

修改你的handleClick函数 #

把原来的函数改成下面这样，就能同时拿到x轴周期索引和分组柱子的索引，还能获取对应的标签和数值：

handleClick = (event, arr, value) => {
  if (Array.isArray(arr) && arr.length > 0) {
    let [data] = arr;
    // 获取x轴周期的索引（原来的_index）
    const xAxisIndex = data._index;
    // 获取分组中具体柱子的dataset索引
    const datasetIndex = data._datasetIndex;
    const chartData = data._chart.tooltip._data;

    // 获取x轴周期的名称
    const periodLabel = chartData.labels[xAxisIndex];
    // 获取该柱子对应的分组名称（dataset的label）
    const groupName = chartData.datasets[datasetIndex].label;
    // 获取该柱子的数值
    const barValue = chartData.datasets[datasetIndex].data[xAxisIndex];
    // 如果你的dataset里有自定义的key字段，也可以拿到
    const barKey = chartData.datasets[datasetIndex].key;

    this.setState({
      key: barKey,
      xAxisIndex: xAxisIndex,
      datasetIndex: datasetIndex,
      periodLabel: periodLabel,
      groupName: groupName,
      value: barValue,
      showPopup: true
    });
  }
}

为什么这个方法有效？ #

• 分组柱状图的每个柱子都属于一个独立的dataset，_datasetIndex就是这个dataset在datasets数组里的位置，比如第一个分组的柱子_datasetIndex是0，第二个是1，以此类推。
• 结合xAxisIndex（x轴周期的索引）和datasetIndex，就能精准定位到你点击的那根柱子，不管是哪个周期里的哪个分组。
• 这个修改对普通柱状图也完全兼容，因为普通柱状图只有一个dataset，_datasetIndex固定为0，不会影响原来的逻辑。

你可以测试一下，点击分组柱状图里的不同柱子，就能拿到对应的分组索引和详细信息啦！

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