Question

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

Answer 1

现在是2019年，基本HighCharts下载随附的解决方案仍然没有。我已经找到一种方法来操纵 LEFT 单击，以显示各种菜单。现在，我知道这可能不是最好的情况，但是您仍然可以完全单击并访问所有数据，并且仍然可以执行常规的向下钻取功能等。您可能需要对其进行重新处理。这是一个TypeScript的示例，但只需进行少量编辑即可轻松复制到JavaScript。

请原谅菜单缺少CSS。

您的函数在图表之前初始化。该变量用于防止菜单消失，在此处 NOT 是必需的。

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 。希望对您有所帮助。

Answer 2

我在下面做了解决方案。希望它有所帮助。

 plotOptions: {
        series: {
            point: {
                events: {
                     contextmenu: function (e) {
                            $('#constext-menu-div').css({top: e.chartY, left: e.chartX});
                            $('#constext-menu-div').show();
                            console.log(e);
                        },
                        click: function(){
                            $('#constext-menu-div').hide();
                        }
                }
            }
        }
    },

＆＃34; http://jsfiddle.net/c42Ms/45/＆＃34;

Answer 3

它不是内置功能，但您可以使用custom-events扩展名，然后右键单击。最后一步是用菜单显示/隐藏任何div。

右键单击High Chart系列显示Context Menu

3 个答案: