【Antv G2 5.x】折线图添加点击事件,获取当前坐标数据

在这里插入图片描述

点击图片中的小黄点是能获取到当前(x,y)

      this.chart.on('point:click', (event) => {
   
        console.log('点击图片中的点:', event);
      });

但是大多数移入会弹出tooltip事件,变成小蓝点,导致当前(x,y)获取失败
在这里插入图片描述

我这里是用show 事件,而不是其他文章的change

      // 监听 tooltip:show 事件
      this.chart.on('tooltip:show', (event) => {
   
        // console.log('当前 tooltip 显示的数据:', event.data.data)
        this.currentShowTooltipPoint = event.data.data
      })

      // 监听绘图区plot的点击事件
      this.chart.on('plot:click', ev => {
   
        console.log('当前 click 显示的数据:', this.currentShowTooltipPoint)
        console.log(this.currentShowTooltipPoint)
      })

[
  {
   
    "total": "1216",
    "month": "01"
  },
  {
   
    "total": "205",
    "month": "02"
  },
  {
   
    "total": "4484",
    "month": "03"
  },
  {
   
    "total": "96",
    "month": "04"
  },
  {
   
    "total": "264",
    "month": "05"
  },
  {
   
    "total": "249",
    "month": "06"
  },
  {
   
    "total": "185",
    "month": 
AntV G2 是一款用于数据可视化的 JavaScript 图表库,可以实现分组柱状图和折线图的混合画法。下面是五组数据混合画法的实现步骤: 1. 创建一个 G2 图表实例。 ```javascript import { Chart } from '@antv/g2'; const chart = new Chart({ container: 'container', width: 600, height: 400, padding: [40, 60, 60, 80] }); ``` 2. 使用 `chart.source()` 方法设置数据源,并使用 `chart.scale()` 方法设置各个数据维度的度量。 ```javascript chart.source(data, { month: { range: [0, 1], tickCount: 6 }, value: { min: 0, alias: '销售额(万)', formatter: val => val.toFixed(0) }, type: { formatter: val => val === 'a' ? '类别一' : '类别二' } }); ``` 3. 使用 `chart.axis()` 方法设置坐标轴。 ```javascript chart.axis('month', { label: { textStyle: { fill: '#aaa' } } }); chart.axis('value', { label: { textStyle: { fill: '#aaa' } } }); ``` 4. 使用 `chart.legend()` 方法设置图例。 ```javascript chart.legend({ position: 'top-center', marker: 'square', offsetY: -20, textStyle: { fill: '#aaa' } }); ``` 5. 使用 `chart.interval()` 方法绘制柱状图,并使用 `chart.line()` 方法绘制折线图。 ```javascript chart.interval().position('month*value').color('type', ['#1890FF', '#2FC25B']).adjust([{ type: 'dodge', marginRatio: 1 / 32 }]); chart.line().position('month*value').color('type', ['#1890FF', '#2FC25B']); ``` 6. 调用 `chart.render()` 方法将图表渲染到页面上。 ```javascript chart.render(); ``` 完整代码如下: ```javascript import { Chart } from '@antv/g2'; const data = [ { month: '1月', type: 'a', value: 100 }, { month: '2月', type: 'a', value: 300 }, { month: '3月', type: 'a', value: 200 }, { month: '4月', type: 'a', value: 400 }, { month: '5月', type: 'a', value: 250 }, { month: '6月', type: 'a', value: 500 }, { month: '1月', type: 'b', value: 50 }, { month: '2月', type: 'b', value: 150 }, { month: '3月', type: 'b', value: 100 }, { month: '4月', type: 'b', value: 200 }, { month: '5月', type: 'b', value: 125 }, { month: '6月', type: 'b', value: 250 } ]; const chart = new Chart({ container: 'container', width: 600, height: 400, padding: [40, 60, 60, 80] }); chart.source(data, { month: { range: [0, 1], tickCount: 6 }, value: { min: 0, alias: '销售额(万)', formatter: val => val.toFixed(0) }, type: { formatter: val => val === 'a' ? '类别一' : '类别二' } }); chart.axis('month', { label: { textStyle: { fill: '#aaa' } } }); chart.axis('value', { label: { textStyle: { fill: '#aaa' } } }); chart.legend({ position: 'top-center', marker: 'square', offsetY: -20, textStyle: { fill: '#aaa' } }); chart.interval().position('month*value').color('type', ['#1890FF', '#2FC25B']).adjust([{ type: 'dodge', marginRatio: 1 / 32 }]); chart.line().position('month*value').color('type', ['#1890FF', '#2FC25B']); chart.render(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值