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

@nivo/heatmap 库的 onClick 事件在反应中不起作用

如何解决@nivo/heatmap 库的 onClick 事件在反应中不起作用

为@nivo/heatmap 添加 onClick 事件并使用 ReactHeatMapCanvas 不起作用,相同的事件处理程序仅适用于 SVG。 对此有任何帮助或建议。使用最新的 nivo/core 和 nivo/heatmap npm 包。


<ResponsiveHeatMapCanvas
      data={heatMapData.dataSample}
      keys={heatMapData.keys}
      indexBy="columnName"
      onClick={() => console.log('clicked')}
      margin={{ top: 200,right: 60,bottom: 100,left: 200 }}
      pixelRatio={1}
      minValue={0}
      maxValue={100}
      forceSquare={false}
      axisTop={{
        orient: 'top',tickSize: 19,tickPadding: 10,tickRotation: 51,legend: '',legendOffset: -12,}}
      axisRight={null}
      axisBottom={null}
      axisLeft={{
        orient: 'left',tickSize: 9,tickPadding: 5,tickRotation: -32,legendPosition: 'middle',legendOffset: -40,}}
      enableGridX={false}
      enableGridY={false}
      cellShape="rect"
      cellOpacity={1}
      cellBorderWidth={20}
      cellBorderColor={{ from: 'color',modifiers: [['darker','0']] }}
      enableLabels={true}
      labelTextColor={{ from: 'color','3']] }}
      motionStiffness={120}
      motiondamping={9}
      isInteractive={true}
      hoverTarget="cell"
      cellHoverOpacity={1}
      cellHoverOthersOpacity={0.1}
      colors="OrRd"
      padding={2}
    />

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