The issue has been closed

折线图点击事件会返回所有数据 #5068

KuduroJS posted onGitHub

预期是返回点击项数据

另，面积图也有这个问题

复现代码：

/**
 * A recreation of this demo: https://observablehq.com/@d3/line-chart
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close');

chart.on('element:click', ev => {
  console.log('click...', ev)
})


chart.render();

因为折线图、面积图，本质都是一个图形绘制一组数据，所以点击图形的数据的时候，返回的确实是一组数据，对于这类，可以通过点击点的位置，通过数学方式获取最近的一个点。

@pearmini 当前有提供方法做到这个吗？

posted by hustcc almost 2 years ago

目前没有提供方法，目前可以通过在折线图上增加 point mark，然后监听 point 的点击事件，可以获取数据。

posted by pearmini almost 2 years ago

可以使用监听tooltip的变化，变相的实现点击获取对应数据具体代码：

const onReadyPie = (plot) => {
  let clickData;
  plot.on('tooltip:change', (e) => {
    clickData=e?.data?.items[0];
  });
  plot.on('element:click', (evt) => {
    console.log('click',clickData);
  });
};

<Line
  {...config}
  onReady={onReadyPie}
/>

posted by atYty almost 2 years ago

onReady={(plot) => {
  plot.chart.on('plot:click', (evt) => {
    const { x, y } = evt;
    console.log(plot.chart.getTooltipItems({ x, y }));
  });
}}

posted by atYty almost 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

折线图点击事件会返回所有数据 #5068

Company

Community

Support

Connect