AmChart+React中如何在点击事件传递对应Component值

我有如下数据结构：

{
Priority    int    `json:"priority"`
Component   int    `json:"component"`
}

数据示例：

[{
  Priority: 1,
  Component: 4
 },
 {
  Priority: 2,
  Component: 3
}]

已创建AmChart图表：

const chart = am4core.create("testChart", am4charts.XYChart);
const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "priority";

点击事件处理函数：

categoryAxis.renderer.labels.template.events.on("hit", function (event) {
  console.log({"dataItem": event.target.dataItem})
  props.setID(
    parseInt(
      (event.target.dataItem as AxisDataItem & { category: string })
        .category
    )
  );
});

当前点击Y轴分类时，会调用setID传入对应priority值。需求：点击Y轴的priority值时，需向setID传入对应的component值，而非priority值；且Y轴仅显示priority值，例如点击1时传入4。请问如何实现？

核心思路是让Y轴数据项关联到原始数据的Component值，同时保持标签显示Priority，具体实现有两种简洁方式：

方式一：直接利用dataContext访问原始数据 #

如果图表已正确绑定数据源（chart.data = 你的数据数组），轴数据项的dataContext会直接指向原始数组元素，无需额外处理：

// 确保图表已绑定数据源
chart.data = 你的数据数组;

const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Priority";
// Y轴标签保持显示Priority值
categoryAxis.renderer.labels.template.text = "{category}";

// 修改点击事件
categoryAxis.renderer.labels.template.events.on("hit", function (event) {
  // 从dataContext直接获取对应Component值
  const componentId = event.target.dataItem.dataContext.Component;
  props.setID(componentId);
});

方式二：手动存储自定义属性（适用于复杂数据场景） #

如果需要更灵活的控制，可以在轴数据项初始化时，把Component值存入自定义属性：

chart.data = 你的数据数组;

const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Priority";
categoryAxis.renderer.labels.template.text = "{category}";

// 轴数据验证完成后，绑定Component值到自定义属性
categoryAxis.events.on("datavalidated", function() {
  categoryAxis.dataItems.forEach(item => {
    const targetData = chart.data.find(d => d.Priority === parseInt(item.category));
    if (targetData) {
      item.componentId = targetData.Component;
    }
  });
});

// 修改点击事件
categoryAxis.renderer.labels.template.events.on("hit", function (event) {
  const componentId = event.target.dataItem.componentId;
  if (componentId !== undefined) {
    props.setID(componentId);
  }
});

两种方式都能实现：Y轴显示Priority值，点击时传入对应的Component值。

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