微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

有没有办法在 Nivo 图表上的条形图上制作 onClick 处理程序?

如何解决有没有办法在 Nivo 图表上的条形图上制作 onClick 处理程序?

我是 Nivo.rocks 的新手,这是一个基于 React 的图表库。我试图将一个点击处理程序添加一个栏上,以便控制台.log 该栏上的数据。目前,该组件带有自己的“工具提示”,当您将鼠标悬停在栏上时会显示此数据,但我不想要那样。

我已经查看了文档,但它没有清楚地说明如何做到这一点,甚至可能吗? 到目前为止,我已经制作了一个按钮,可以从两个条形中注销数据

主要代码与此沙箱相同: https://codesandbox.io/s/nivo-0xy2m?file=/src/index.js

我的按钮:

const clickHandler = () =>{
    console.log(
        `all the people that disagreed for ${data[0].statement} = ${data[0].disagree}`
    )
}

解决方法

您可以使用 onClick 道具:

onClick={(data) => {
    console.log(
    `all the people that ${data["id"]} for ${data["key"]} = ${data["value"]}`
    );
}}

sandbox example

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。