Question

我有一个区域高清图表。在图表中添加了一个点击事件，如下所示：

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

工作正常。问题是你只能在一条线附近点击，但不能在线下面的区域点击，它不能点击。

有没有我忽略的设置？

Answer 1

您可以在trackByArea: true

中使用此plotOptions区域功能

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

将此与click event

相结合

点击：功能

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

前：

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

Answer 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);
            }
        }        
    },

Answer 3

根据the highcharts documentation，click事件仅涵盖点击系列本身，因此它不会在点击该行下方点击点击事件。

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

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

Answer 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

希望有所帮助。

Highcharts：区域可点击

4 个答案: