ant design charts 踩坑记录

houhou2024-03-29 16:32

1 图形乱序

原因：数据没有按时间排序

2 hover时tooltip位置偏移，图例的分页按钮点击无效

原因：页面存在缩放导致鼠标位置偏移

解决方法：G6中设置 supportCSSTransform: true

相关issues：github.com/antvis/g2/i...

3 图形点击事件会返回所有数据

比如点击折线图上某个点，预期是返回点击项数据，结果却是返回的全部数据

•方法一：可以使用监听tooltip的变化，获取到tooltip 的变化。多条折线时获取到的是tool中对应的一组数据

javascript 复制代码

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

•方法二：通过监听tooltip的变化获取当前横轴上的一组多类目数据，通过鼠标点击获取当前所点击点的类目，过滤获取到多条折线中的一个点数据。

typescript 复制代码

 onReady: (plot: any) => {
     plot.on('element:click', (evt) => {
         const { x, y } = evt;
         const tooltipData = plot.chart.getTooltipItems({ x, y })
         const originData = evt?.data?.data || []
         const curData = tooltipData.find((val: any) => {
             return val?.name === originData[0]?.name
         })
      });
 }