【问题标题】:React Nivo tooltip not working on some graphsReact Nivo 工具提示不适用于某些图表
【发布时间】:2021-08-04 15:44:43
【问题描述】:

我正在使用 Nivo ResponsivePie 来显示一些数据,除了工具提示之外,一切似乎都在工作。工具提示只是没有显示。我有一个带有工作工具提示的热图和条形图。我直接从文档https://nivo.rocks/pie复制了代码

折线图也有同样的问题。

当我检查开发工具时,我看到 <path d=".."/> 在我在图表上移动时动态更新,但样式标签中没有像其他图表那样弹出任何内容
(像这样

<div style="pointer-events: none; position: absolute; z-index: 10; top: 0px; left: 0px; transform: translate(279.312px, 157px);"><div style="background: white; color: inherit; font-size: inherit; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px; padding: 5px 9px;"><div style="white-space: pre; display: flex; align-items: center;"><span style="display: block; width: 12px; height: 12px; background: rgb(247, 251, 255); margin-right: 7px;"></span><span>approach - Sun 08/01: <strong>20</strong></span></div></div></div>

)

【问题讨论】:

    标签: javascript css reactjs nivo-react


    【解决方案1】:

    问题

    原来它与版本有关。 我跑了npm ls,发现:

    ├── @nivo/bar@0.72.0
    ├── @nivo/core@0.73.0
    ├── @nivo/heatmap@0.72.0
    ├── @nivo/line@0.73.0
    ├── @nivo/pie@0.73.0
    ├── @nivo/tooltip@0.72.0
    

    工具提示损坏的所有模块都在 0.73.0 上运行

    修复

    我跑了

    npm uninstall @nivo/pie
    npm uninstall @nivo/core
    npm uninstall @nivo/line
    

    然后

    npm install @nivo/core@0.72.0 --legacy-peer-deps
    npm install @nivo/pie@0.72.0 --legacy-peer-deps
    npm install @nivo/line@0.72.0 --legacy-peer-deps
    

    【讨论】:

    • 我在热图上缺少工具提示时遇到了同样的问题,它是唯一使用 0.73.0 的问题。在0.72.0 上强制它解决了这个问题。感谢分享!
    • 很高兴我能帮上忙 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多