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

Question

使用 Highcharts 4.1.1。如果选择了一个点，我将显示一个包含更多信息的 div。如果未选择所有点，我想隐藏 div。我想我可以使用 click 事件。如果我将事件记录到控制台，我可以检查它并看到point.state的值为“select”和point.selected 是真的。但是，如果我尝试记录 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]
        }]
    });
});

还有一把 fiddle :http://jsfiddle.net/1gsqq8yr/1/

单击任意点，注意状态为“悬停”。为什么？再次点击同一点，状态为“select”，但selected值为“true”(不应该是false吗？)。我尝试将悬停状态 enabled 值设置为 false，但随后返回未定义。真的不知道这是怎么回事。

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);

这是fiddle .