React AntV/G2Plot环形图Pie添加点击事件，即点击图环触发获取相关数据。

步骤：

1、添加相关依赖，引入AntV/G2Plot图表组件

2、添加配置项

3、添加点击事件方法（关键部分：在onReady={onReadyPie}，onReady是图表渲染完成执行回调方法，在该方法中获取chart对象plot，在plot上通过on绑定相关事件）代码片段如下：

/**
       * 添加环形图点击事件， element 代表图形元素，关于图形元素，请查看：https://g2.antv.vision/zh/docs/manual/concepts/element
       * @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。
       * @author QC
       * @since 20220926
       * @version V1.0
       */
       const onReadyPie = (plot) => {
           // 图表的点击事情，可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basic
           plot.on('element:click', (...args) => {
               const pieData = args[0].data?.data
               console.log(args)
               console.log('pieData')
               console.log(pieData)
               this.onOpenView(pieData?.indexName)
           })
       }
       return (
           <div>
               <div>{data?.length > 0 ? <Pie {...config} onReady={onReadyPie} /> : <Empty />}</div>
           </div>
       )

4、引用图表

下例中该React组件是用类组件写的，不过不影响使用，完整代码如下：

import React, { Component } from 'react'
import { G2, Pie } from '@ant-design/plots'
import { Empty } from 'antd'
/*** 饼状图** @author QC* @since 20220719* @version V1.0*/
class Index extends Component {constructor(props) {super(props)this.state = {}}componentDidMount() {this.loadData()}/*** 加载数据方法*/loadData = () => {}/*** 显示弹框方法*/onOpenView = (type) => {console.log(type)}render() {const data = []const G = G2.getEngine('canvas')const config = {appendPadding: 10,data,angleField: 'number',colorField: 'indexName',radius: 0.8,innerRadius: 0.7,legend: false,tooltip: {showMarkers: false,formatter: (obj) => {// 格式化提示return {name: `<span style="color: #0F1348">${obj.indexName}</span>`,value: `<span style="color: #0F1348">${obj.number}次</span>`,}},},label: {type: 'spider',style: {fill: 'black',opacity: 1,fontSize: 14,},labelHeight: 40,formatter: (obj, mappingData) => {const group = new G.Group({})group.addShape({type: 'circle',attrs: {x: 0,y: 0,width: 40,height: 50,r: 5,fill: mappingData.color,},})group.addShape({type: 'text',attrs: {x: 10,y: 8,text: `${obj.indexName}`,fill: mappingData.color === '#5D7092' ? '#ffffff' : mappingData.color, // 把默认灰色改为白色方便查看fontWeight: 900, // 环形外标签字体粗细fontSize: 14, // 环形外标签字体大小},})group.addShape({type: 'text',attrs: {x: 0,y: 25,text: `${obj.number}次`,fill: 'rgba(165, 231, 241, 1)',fontWeight: 900, // 环形外标签字体粗细fontSize: 14, // 环形外标签字体大小},})return group},},statistic: false,interactions: [{type: 'element-selected',},{type: 'element-active',},{type: 'element:click',},],}/*** 添加环形图点击事件， element 代表图形元素，关于图形元素，请查看：https://g2.antv.vision/zh/docs/manual/concepts/element* @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。* @author QC* @since 20220926* @version V1.0*/const onReadyPie = (plot) => {// 图表的点击事情，可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basicplot.on('element:click', (...args) => {const pieData = args[0].data?.dataconsole.log(args)console.log('pieData')console.log(pieData)this.onOpenView(pieData?.indexName)})}return (<div><div>{data?.length > 0 ? <Pie {...config} onReady={onReadyPie} /> : <Empty />}</div></div>)}
}
export default Index

其他详细配置请看官方文档：

1、环图 | Ant Design Charts

2、图表 - Chart | G2

参考文献：

1、react antv（Ant Design Charts）怎么使用图表事件_南城夏季的博客-CSDN博客

React AntV/G2Plot环形图Pie添加点击事件，即点击图环触发获取相关数据。相关推荐

R语言ggplot2可视化：可视化人口金字塔图、直方图（堆叠直方图、连续变量堆叠直方图、离散变量堆叠直方图）、密度图、箱图（添加抖动数据点、tufte箱图、多分类变量分组箱图）、小提琴图
R语言ggplot2可视化:可视化人口金字塔图.直方图(堆叠直方图.连续变量堆叠直方图.离散变量堆叠直方图).密度图.箱图(添加抖动数据点.tufte箱图.多分类变量分组箱图).小提琴图目录
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
echart 动画饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
echarts 3d饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
plotly.js 常见图形使用常见图形操作折线图热力图轮廓图泡泡图图点击事件
这篇文章内容来自自己工作中用到的可视化操作,偏向于科学图表方面.网上资料多且杂,并且有的并不准确,不过如果时间充足,推荐看plotly.js的英文官网,也提供搜索功能,只是需要对图表很熟悉并且英文要好 ...
html父级添加伪类after,关于伪类after后续追加，实现js事件（如点击事件）
实现情况为:点击"编辑"后,"编辑"文字变成"完成",再点击伪类元素后的"完成",此时的"完成"应该 ...
echarts3.0--地图和其点击事件及地图内文字内容样式位置控制
echarts的很多属性在不同的图中都是共用的,在本文中没有找到想要的,可以在我博客其他关于echarts3中看看,可能就找到了. 准备工作: ①到echarts3(注意是echarts3,不是ech ...
Openlayers 聚合图、权重聚合图以及聚合图点击事件
Openlayers 聚合图.权重聚合图以及聚合图点击事件 OpenLayers 教程 Openlayers 聚合图.权重聚合图.聚合图事件在线示例 OpenLayers 教程在实际工作中,Ope ...
[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...

React AntV/G2Plot环形图Pie添加点击事件，即点击图环触发获取相关数据。

React AntV/G2Plot环形图Pie添加点击事件，即点击图环触发获取相关数据。相关推荐

最新文章

热门文章