VChart图表点击数据点，展示操作列表？-灵析社区

codbad

解决方案 Solution 通过VChart图表的事件交互可以实现这个功能 1. 注册图表元素的点击事件 2. 通过事件回调参数可以拿到点击事件的信息，例如事件坐标等 3. 渲染一个菜单，菜单中添加你需要响应的操作 代码示例 Code Example vchart.on("pointerdown", { level: "mark" }, ({ event }) => { // show your menu event.preventDefault(); menu.style.display = "block"; menu.style.left = `${event.pageX}px`; menu.style.top = `${event.pageY}px`; }); 结果展示 Results "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/86937162c5508fe5a6b77fb53bc0c5df.png) Demo: "https://codesandbox.io/s/click-menu-m42d9j" (https://link.segmentfault.com/?enc=JHb6yVFQ234XVsuNxhMlHw%3D%3D.t4aHOELLN5p3Uccg3A5jSYIrIcCRu8gbEibLFEJhd%2FRlCc7QjAAYzsGt0you0bA0) 相关文档 Quote Event option: "https://visactor.io/vchart/api/API/event" (https://link.segmentfault.com/?enc=sPYQvJpUIsGikSRJWm0aFA%3D%3D.jViOEB8CIAcaHBh27pk97ZsmnK9jm9acQmb1HFcpvZcANTw1hbYvKGt2dxOUywC6) Event tutorials: "https://visactor.io/vchart/guide/tutorial_docs/Event" (https://link.segmentfault.com/?enc=Er%2F83A%2FY%2Bf3GMNBaUPObGw%3D%3D.VxWZiinBrBOIcpt%2BJ1k48HC2HspWXAbA8W3%2B0UEJfgVal%2Ff7EG4Nyd7qQXDy8dajs2PdPzQ6Z2OOxCT7d7kNNw%3D%3D) github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=vMLmOKb6d7c3RcOH9SZhgw%3D%3D.TFuwOG%2BYjosd7lDytiHR%2FyQQEoSHU5nxofhFH2hWQzpAjzLP3mKyuoV3Zi0U2Mbu)