Highcharts：可点击区域答案

【问题标题】：Highcharts: Area clickableHighcharts：可点击区域
【发布时间】：2011-11-11 09:18:12
【问题描述】：

我有一个面积 Highchart 图表。在图表中添加了一个点击事件，如下所示：

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

它工作正常。问题是你只能在非常靠近一条线的地方点击，而不是在这条线下方的区域，它是不可点击的。

有没有我忽略的设置？

【问题讨论】：

标签： highcharts

【解决方案1】：

你可以在plotOptions中使用这个trackByArea: true面积函数

trackByArea：布尔值

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

将此与click event结合起来

点击：功能

点击系列时触发。 this关键字指的是系列对象本身。一个参数，事件，被传递给功能。这包含了基于 jQuery 的常见事件信息或 MooTools，具体取决于哪个库用作基础高图。此外， event.point 包含一个指向最近的指针图上的点。

例如：

plotOptions: { area: { **trackByArea: true**, marker: { enabled: false },..

【讨论】：

您好，您的回答对我很有用，但它仅在系列可见时才有效，是否需要执行其他操作才能点击任何可见系列？
我同意这个答案应该被接受。它比被接受的问题更具体。

【解决方案2】：

实际上，您可以开箱即用地做您想做的事。选择的答案只是查看 PlotOptions 对象的事件；您需要查看 Chart 对象的事件。

文档和示例位于： http://www.highcharts.com/ref/#chart-events--click

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

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

【讨论】：

【解决方案3】：

根据the highcharts documentation，click 事件仅涵盖点击系列本身，因此不会注册点击线下的点击事件。

要做你想做的事，你可能需要使用mouseOver event自己处理事情。不幸的是，当鼠标悬停在图表上时会触发此事件，这意味着您需要确定鼠标在图表上的位置等等。

或者，您可以修改 highcharts 源代码以满足您的需要，或对其进行扩展，但无论如何，我不相信这可以轻松完成。

【讨论】：

在下面查看我新发布的答案；自 1.2.0 (2010-02-23) 起，Highcharts 已支持此事件。

【解决方案4】：

点击绘图背景时可以使用点击图表事件，如下所示：

$(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]        
        }]
    });
});

这是文档的链接：

http://www.highcharts.com/ref/#chart-events--click

希望对您有所帮助。

【讨论】：

当您单击时，如何在警报中显示被单击的数据点值？