React Native中如何获取VictoryLine图表特定数据点的对应数据

要实现点击VictoryLine上的数据点获取对应数据，可通过以下两种方式解决：

方式一：直接给VictoryLine绑定onClick回调 #

VictoryLine支持直接传入onClick回调，点击线条上的点时会返回对应的数据对象，直接在组件上添加该回调即可：

<VictoryLine
  data={[
    {x: 'JAN', y: 500},
    {x: 'FEB', y: 150},
    {x: 'MAR', y: 612},
    {x: 'APR', y: 245},
    {x: 'MAY', y: 456},
    {x: 'JUN', y: 56},
  ]}
  interpolation={'natural'}
  style={{
    data: {stroke: Color.primary},
  }}
  animate
  onClick={(evt, props) => {
    // props.data即为当前点击的数据点对象
    console.log('点击的数据：', props.data);
    // 点击FEB时会输出 {x: 'FEB', y: 150}
  }}
/>

方式二：配合VictoryScatter实现精准点击数据点 #

如果觉得点击线条的触发范围不够精准，可单独用VictoryScatter渲染每个数据点，给散点绑定点击事件，这样点击圆点时能更准确触发：

// 先把数据抽成变量，避免重复定义
const chartData = [
  {x: 'JAN', y: 500},
  {x: 'FEB', y: 150},
  {x: 'MAR', y: 612},
  {x: 'APR', y: 245},
  {x: 'MAY', y: 456},
  {x: 'JUN', y: 56},
];

<VictoryChart
  domainPadding={22}
  padding={{top: 10, bottom: 120, left: -10, right: 90}}>
  {/* 原有的VictoryAxis、Defs、VictoryArea保持不变 */}
  <VictoryLine
    data={chartData}
    interpolation={'natural'}
    style={{
      data: {stroke: Color.primary},
    }}
    animate
  />
  <VictoryScatter
    data={chartData}
    size={6}
    style={{
      data: {fill: Color.primary},
    }}
    onClick={(evt, props) => {
      console.log('点击的散点数据：', props.data);
    }}
  />
</VictoryChart>

关于你之前event属性失效的说明 #

如果之前尝试用events属性，需要严格遵循它的数组配置格式，每个元素包含target、eventName和callback，示例如下：

<VictoryLine
  // 其他属性不变
  events={[
    {
      target: 'data',
      eventName: 'click',
      callback: (evt, props) => {
        console.log('点击数据：', props.data);
      }
    }
  ]}
/>

这种写法和直接绑定onClick效果一致，但更繁琐，推荐用直接绑定onClick的方式。

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