【问题标题】:How to add Modal pop up on nodes of org chart Highcharts如何在组织结构图 Highcharts 的节点上添加 Modal 弹出窗口
【发布时间】:2021-05-19 09:49:41
【问题描述】:

我在一个 highchart 页面上工作,当我单击组织结构图的节点时,我需要在该页面上显示我的数据。 我能够在节点的点击上显示数据,但这是一个工具提示。我的要求是需要在节点的点击上显示数据,但这应该是模态弹出窗口。 这是我的代码

[https://jsfiddle.net/BlackLabel/2e83ngw1/]

【问题讨论】:

    标签: javascript highcharts getorgchart


    【解决方案1】:

    您可以创建自己的弹出元素,使用点信息更新它并在点的事件中显示/隐藏它,而不是使用工具提示。

    point: {
      events: {
        click: function() {
          const popup = document.getElementById('popup');
    
          popup.innerHTML = this.info;
          popup.style.display = 'block';
    
        },
        mouseOut: function() {
          const popup = document.getElementById('popup');
          popup.style.display = 'none';
        }
      }
    }
    

    现场演示: https://jsfiddle.net/BlackLabel/dhaysfqz/

    API 参考: https://api.highcharts.com/highcharts/series.organization.point.events

    【讨论】:

    • 我想通过点击关闭按钮而不是鼠标退出来关闭我的模式
    • 当我点击节点时,我希望在悬停时不显示时间工具提示。但是在单击悬停工具提示上的关闭按钮后应该是可见的
    • 嗨@Rika Das,好的,感谢您提供更多详细信息。请检查此示例:jsfiddle.net/BlackLabel/sf12xykj
    • 谢谢@ppotaczek。现在我的代码工作正常
    • 嗨@ppotaczek,我需要更多帮助..如果我想将另一个组织结构图显示为节点的模态弹出窗口怎么办。是否可以?你能指导我吗
    猜你喜欢
    • 2021-11-05
    • 1970-01-01
    • 2020-05-25
    • 2023-01-25
    • 1970-01-01
    • 2021-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多