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

如果chart.getSelectedPoints()返回所有其他选定的点并且this回调中的select是刚刚选中的点，为什么不将它们组合起来获得所有选定的点？

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

小提琴here。

或，您可以采取一点setTimeout行动：

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

另一个fiddle。

Answer 2

您可以使用选定的点创建数组，只需按下/覆盖内部的点即可。演示：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]
    }]
});

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

2 个答案: