SwiftUI Charts：为LineMark标记添加触摸事件获取chartItem

方法1：利用图表库内置交互事件 #

多数可视化库（如AntV G2/G2Plot）都提供了标记点的事件绑定能力，无需在.symbol()中嵌套Button，直接通过图表的事件监听实现：

• 以G2为例，监听point:touchstart或point:click事件，判断触发元素是否属于LineMark：

chart.on('point:touchstart', (event) => {
  const { target, data } = event;
  // 确认当前触摸的是LineMark的标记点
  if (target.get('name') === 'line-mark-point') { // 此处name需匹配你的LineMark配置名称
    console.log('触摸到LineMark标记，对应数据：', data);
    // 在此处理业务逻辑，比如获取目标chartItem
  }
});

• 若使用G2Plot，同样通过on方法绑定事件：

const plot = new Line(document.getElementById('container'), config);
plot.on('point:touchstart', (event) => {
  const { data } = event;
  // 过滤出LineMark对应的系列数据
  if (data.seriesName === '你的Line系列名称') {
    console.log('触摸到Line标记，数据：', data);
  }
});

方法2：自定义Symbol并绑定事件 #

如果要通过自定义Symbol实现，不要直接嵌套Button，而是在Symbol渲染函数中手动绑定触摸事件：

chart.line().symbol((x, y, r, ctx) => {
  // 绘制自定义标记（示例为圆形）
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fillStyle = '#1890ff';
  ctx.fill();
  // 获取当前标记对应的SVG元素（SVG渲染场景）
  const el = ctx.canvas.parentNode.querySelector(`[data-x="${x}"][data-y="${y}"]`);
  if (el) {
    el.addEventListener('touchstart', () => {
      // 关联并获取对应数据
      const chartItem = chart.getData().find(item => item.x === x && item.y === y);
      console.log('触摸事件触发：', chartItem);
    });
  }
});

关键注意事项 #

• 不要在Symbol配置中插入HTML元素（如Button），多数可视化库的标记基于Canvas或SVG绘制，不支持直接嵌套DOM元素。
• 事件名称需匹配对应库的文档，触摸事件通常为touchstart/touchend，点击事件为click，不同库存在差异。
• 事件回调中需正确过滤LineMark的元素，避免触发AreaMark等其他标记的事件。

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