Highcharts 点单击事件返回"hover"状态而不是"select"状态

Question

使用Highcharts 4.1.1。如果选择了一个点，我将显示一个包含更多信息的div。如果所有点都未选中，我想隐藏div。我想我可以使用click事件。如果我将event记录到控制台，我可以检查它，发现point.state的值为"select"，point.selected为true。但是，如果我尝试记录event.point.state（而不仅仅是event），结果是"悬停"。因此，我不能使用event.point.selected值，因为它有时是未定义的。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter'
        },
        plotOptions: {
            series: {
                allowPointSelect: true,
                marker: {
                    states: {
                        select: {
                            enabled: true
                        }
                    }
                },
                point: {
                    events: {
                        click: function () {
                            $("#pointState").html("State: " + event.point.state + "<br>" + "Selected? " + event.point.selected);
                        }
                    }
                }
            }
        },
        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://jsfiddle.net/1gsqq8yr/1/

单击任意一点，并注意状态为"悬停"。为什么？再次单击同一点，状态为"选择"，但selected值为"true"（不应该为false吗？）。我曾尝试将悬停状态enabled的值设置为false，但此时返回undefined。真的不知道这里发生了什么。

Answer 1

实际情况是，在图表更改该点的选定状态之前，它将运行您的代码，因此它会为您带来该点的上一个选定状态。

这就是为什么所选属性每次都相反，这就是为什么返回false会取消操作，因为它尚未被触发。我不知道API中有什么变通方法，但你可以检查状态，并根据自己的喜好返回相反的东西：

var state = (this.state == "hover")? "selected" : "hover";
var selected = (this.selected == true) ? "false" : "true";
$("#pointState").html("State: " + state + "<br>" + "Selected? " + selected);

这是小提琴。