Highcharts 高图：区域可点击

我有一张区域海图。 将单击事件添加到图表中，如下所示：

plotOptions: {
                area: {
                    marker: {
                        enabled: false
                    },
                    cursor: 'Pointer',
                    stacking: 'normal',
                    events: {
                        click: function(event) {
                          alert("hi there");
                        }
                    }                   
                }
            }

它很好用。问题是，您只能在非常靠近一条线的地方单击，但不能在该线下方的区域单击，因为它是不可单击的

是否有我忽略的设置？

根据，点击事件只包括点击序列本身，因此它不会注册点击行下方的点击事件

要想做你想做的事情，你可能需要使用。不幸的是，当鼠标悬停在图形上时会触发此事件，这意味着您需要找出鼠标在图形上的位置，等等

---

或者，您可以修改highcharts源代码以满足您的需要，或者对其进行扩展，但在任何情况下，我认为这都不容易做到。

您可以在单击绘图背景时使用click chart事件，如下所示：

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                click: function(event) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+
                          event.yAxis[0].value);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

以下是指向文档的链接：

希望对您有所帮助。

您可以在中使用此区域功能

trackByArea:Boolean

自1.1.6起，无论是整个区域还是仅 行应响应鼠标悬停工具提示和其他鼠标或触摸 事件。默认为false

将此与

单击：功能

单击序列时激发。这个关键字的作用是什么 指系列对象本身。一个参数event被传递给 功能。其中包含基于jQuery的常见事件信息 或MooTools，具体取决于将哪个库用作 海图。此外，event.point保存指向最近 图上的点

例：

---

事实上，你可以直接做你想做的事情。选择的答案只是查看PlotOptions对象的事件；您需要查看图表对象的事件

文档和示例位于：

当您单击背景时，它将触发事件

chart: {
        renderTo: 'container',
        events: {
            click: function(event) {
                alert ('x: '+ event.xAxis[0].value +', y: '+
                      event.yAxis[0].value);
            }
        }        
    },

---

请参阅下面我新发布的答案；Highcharts自1.2.0（2010-02-23）以来一直支持此事件。当您单击时，如何在警报中显示已单击的数据点值？您好，您的答案对我很有用，但仅当on series可见时才起作用，为了能够点击任何一个可见的系列，还需要做些什么吗？我同意这个答案应该是可以接受的。它比被接受的问题更具体。

chart: {
        renderTo: 'container',
        events: {
            click: function(event) {
                alert ('x: '+ event.xAxis[0].value +', y: '+
                      event.yAxis[0].value);
            }
        }        
    },