javascript - HighCharts 多点选择 - 在点选择后立即访问/更新 getSelectedPoints 数组

Question

我有一个 HighCharts 线图，允许选择多个点。每次选择/取消选择后，我想根据所有当前选定的点执行操作。

我正在触发plotoptions.line.point.events.select(或.click)事件，该事件返回最新选择的点。但是，chart.getSelectedPoints() 返回的数组显然直到 .select 或 .click 事件完成后才会更新。因此，我无法在事件内部使用 Chart.getSelectedPoints() 。

以下是此示例的摘录，演示了该问题 - http://jsfiddle.net/joelion/QJ75h/

   plotOptions: {
        series: {
            allowPointSelect: true,
            point: {
                events: {
                    select: function() {
                        var chart = $('#container').highcharts();

                        var selectedPointsStr = "";

                        // when is the chart object updated? after this function finshes?
                        var selectedPoints = chart.getSelectedPoints();
                        $.each(selectedPoints, function(i, value) {
                            selectedPointsStr += "<br>"+value.category;
                        });

                        $report.html(selectedPointsStr);                            
                    }
                }
            }
        }

有没有办法在点选择后立即强制图表 getSelectedPoints() 数组？或者也许是在数组更新后触发的另一个事件？

Answer 1

您可以使用选定的点创建数组，然后只需推送/覆盖内部的点。演示:http://jsfiddle.net/QJ75h/2/

var $report = $('#report'),
    selectedPoints = [];

// create the chart
$('#container').highcharts({
    chart: {},
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            allowPointSelect: true,
            point: {
                events: {
                    select: function (event) {
                        var chart = this.series.chart;

                        var selectedPointsStr = "";
                        if (event.accumulate) {
                            selectedPoints.push(this);
                        } else {
                            selectedPoints = [this];
                        }
                        $.each(selectedPoints, function (i, value) {
                            selectedPointsStr += "<br>" + value.category;
                        });
                        $report.html(selectedPointsStr);
                    }
                }
            }
        }
    },

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