highcharts - 右键单击 Highcharts 系列显示上下文菜单

Question

我想在右键单击 Highcharts 中绘制的系列时显示上下文菜单。我无法在 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 。希望这对您有所帮助。