HighCharts Multiple Point selection - access/update getSelectedPoints array immediately after point select

问题

I have a HighCharts linegraph where I am allowing multiple point selections. After each selection/de-selection is made, I want to perform an action based on all currently selected points.

I'm triggering off of the plotoptions.line.point.events.select (or .click) events, which returns the latest point selected. However, the array returned by chart.getSelectedPoints() apparently doesn't get updated until after the .select or .click event completes. So I cannot use chart.getSelectedPoints() inside the event.

Here's an exerpt from this example demonstrating the problem - 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);                            
                    }
                }
            }
        }

Is there a way force the chart getSelectedPoints() array immediately after a point select? Or maybe another event that fires after the array is updated?

回答1:

You can create array with selected points, and just push/overwrite points which are inside. Demo: 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]
    }]
});

回答2:

If chart.getSelectedPoints() returns all the other points selected and the this in the select callback is the point that was just selected, why not just combine them to get all the selected points?

select: function() {
    var chart = $('#container').highcharts();

    // when is the chart object updated? after this function finshes?
    var selectedPoints = chart.getSelectedPoints();
    selectedPoints.push(this); // now it's got all the points!

    var selectedPointsStr = "";
    $.each(selectedPoints, function(i, value) {
        selectedPointsStr += "<br>"+value.category;
    });

    $report.html(selectedPointsStr);                            
}

Fiddle here.

Or, you could resort to a little setTimeout action:

select: function() {

    setTimeout(function(){

        var chart = $('#container').highcharts();

        // when is the chart object updated? after this function finshes?
        var selectedPoints = chart.getSelectedPoints();

        var selectedPointsStr = "";
        $.each(selectedPoints, function(i, value) {
            selectedPointsStr += "<br>"+value.category;
        });

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

Another fiddle.

来源：https://stackoverflow.com/questions/21249385/highcharts-multiple-point-selection-access-update-getselectedpoints-array-imme

标签

javascript

Highcharts