HighCharts多点选择-选择点后立即访问/更新getSelectedPoints数组 [英] HighCharts Multiple Point selection - access/update getSelectedPoints array immediately after point select

问题描述

我有一个HighCharts折线图，可以在其中选择多个点.进行每个选择/取消选择后，我想基于所有当前选择的点执行操作.

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.

我正在触发plotoptions.line.point.events.select(或.click)事件，该事件将返回选择的最新点.但是，由chart.getSelectedPoints()返回的数组显然直到.select或.click事件完成后才更新.所以我不能在事件内部使用chart.getSelectedPoints() .

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.

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

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

有没有办法在选择点后立即强制图表getSelectedPoints()数组?还是在更新数组后触发另一个事件?

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?

推荐答案

您可以创建带有选定点的数组，只需压入/覆盖其中的点即可.演示: http://jsfiddle.net/QJ75h/2/

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

这篇关于HighCharts多点选择-选择点后立即访问/更新getSelectedPoints数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！