绑定要右键单击的事件

Question

如何绑定或识别右键单击事件？

我有一个散点图，左键单击会在单击的位置添加一个点；我想右键单击以删除该点（如果存在）。

这是我当前的代码：

var chart = new Highcharts.Chart({
   chart: {
       renderTo: 'container',
       events: {
           click: function(event) {
               var cs = [Math.floor(event.xAxis[0].value),
                         Math.floor(event.yAxis[0].value)];
               this.series[0].addPoint(cs);
           }
       },
        type: 'scatter',
   },
   ... etc. ...
});

Answer 1

这应该会有所帮助：使Highcharts支持右键单击上下文菜单

Answer 2

这不是一个完整的解决方案：我不知道如何捕获右键单击事件。

但这里有一个点击图表背景的变通方法：

• 让用户点击shift
• 像以前一样提供回调
• 在回调中，检查事件。如果按下了shift，请执行不同的操作

回调可能是这样的：

function clickChart(event) {
    var isShiftPressed = event.shiftKey;
    if(isShiftPressed) {
        // do something
    } else {
        // do something different
}

事件对象具有布尔属性shiftKey（和altKey）。

这里有一个删除点的变通方法：（实际上，这不是一个变通方法——我只是没有意识到有更简单的方法！）

• 积分有自己的事件
• 只需设置一个回调，在单击点时删除点

示例：

function clickPoint(event) {
    this.remove();
}
var chart = new Highcharts.Chart({
    chart: {
        type: 'scatter',
        renderTo: 'chart',
    },
    series: [{
         point: {
             events: {
                 click: clickPoint
             }
         }
    }]
});

注意：文档至少有误导性，但jsfiddle示例似乎是正确的。这似乎表明point选项在series中是而不是。

Answer 3

目前，Highcharts只支持少数事件。供参考：https://www.highcharts.com/blog/tutorials/introduction-to-highcharts-events/

添加自定义事件，如

• 双击（包括移动设备）
• 右键单击（上下文菜单）
• 鼠标悬停
• 鼠标移出
• 鼠标放下
• 鼠标移动

我们可以添加一个插件

高级图表自定义事件

https://www.npmjs.com/package/highcharts-custom-events

希望你觉得这有帮助，并解决你的问题。