右键单击 High Chart 系列显示上下文菜单

Question

我想在 High 图表中绘制的系列的右键单击时显示上下文菜单。我无法在 High 图表中找到任何选项来执行此操作。任何人都可以提出一种方法来实现这一要求。

Answer 1

好吧，现在是 2019 年，基本HighCharts下载中仍然没有解决方案。我找到了一种操作左键单击的方法，以显示各种菜单。现在我明白这可能不是最好的情况，但是您仍然可以完全访问来自单击的所有数据，并且仍然可以执行正常的向下钻取功能等。您可能需要重新设计它。这是一个TypeScript示例，但可以通过JavaScript一些编辑轻松复制。

请原谅缺乏CSS菜单。

您的函数在图表之前初始化。该变量用于防止菜单消失，这里不是强制性的。

let callDrillDown = () => {
    alert('drill1');
}

let callDrillDown2 = () => {
    alert('drill2');
}

let mouseIn: boolean;

这就是面包和黄油，在单击期间，您<div>从 中拉出 并向其HTML添加onclick操作。

plotOptions: {
    column: {
        events: {
            click: (event: any) => {
                let contextMenu = document.getElementById('contextMenu');
                let contextMenuItem1 = document.getElementById('contextMenuItem1');
                let contextMenuItem2 = document.getElementById('contextMenuItem2');

                contextMenuItem1.onclick = callDrillDown;
                contextMenuItem2.onclick = callDrillDown2;

                contextMenu.onmouseenter = () => {
                    mouseIn = true;
                };

                contextMenu.onmouseleave = () => {
                    mouseIn = false;
                    setTimeout(() => {
                        if (!mouseIn) {
                            contextMenu.setAttribute('style', 'display: none');
                        }
                    }, 1000);
                };

                contextMenu.setAttribute('style', 'top: ' 
                       + event.pageY + 'px; left:'
                       + event.pageX + 'px;');
            }
        }
    }
}

在身体内部添加 HTML

<div id="contextMenu" style="display: none" class="contextMenu">
    <div id="contextMenuItem1">Data</div>
    <div id="contextMenuItem2">Data2</div>
</div>

这是jsFiddle. 希望这有帮助。