ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.93k stars 362 forks source link

有事件的使用例子吗?🧐[问题] #74

Closed malusama closed 4 years ago

malusama commented 4 years ago

🧐 问题描述 例如图表的onPlotClick事件.

我在config里添加了onPlotClick: () => {console.log('test')} 但是好像并不生效

💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]

🚑 其他信息 [如截图等其他信息可以贴在这里]

afc163 commented 4 years ago

events: { onPlotClick }

lxfu1 commented 4 years ago

https://github.com/ant-design/ant-design-charts/issues/68

qaperf commented 3 years ago

同问,有没有事件的demo呀!

visiky commented 3 years ago

参考下:

ITzhangxi commented 2 years ago
@qaperf 我这有个demo 希望能帮到你

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Funnel } from '@ant-design/plots';
import type { FunnelConfig, Plot } from '@ant-design/plots';

const DemoFunnel = () => {
  const data = [
    {
      stage: '简历筛选',
      number: 253,
    },
    {
      stage: '初试人数',
      number: 151,
    },
    {
      stage: '复试人数',
      number: 113,
    },
    {
      stage: '录取人数',
      number: 87,
    },
    {
      stage: '入职人数',
      number: 59,
    },
  ];
  const config:FunnelConfig = {
    data: data,
    xField: 'stage',
    yField: 'number',
    legend: false,
    shape: 'pyramid',
    onReady: (plot: Plot<any>) => {
      plot.on('element:click', (...args) => {
        console.log(...args);
      });
    }
  };
  return <Funnel {...config} />;
};

ReactDOM.render(<DemoFunnel />, document.getElementById('container'));