Question

我想在Highcharts中实现多个点选择，我已经将这个示例提供了我的进展，但似乎我的代码选择事件被多次调用，具体取决于您选择了多少点。是否可以一次性获取所有选定的点并仅调用一次选择事件？

chart: {
    renderTo: 'container',
    defaultSeriesType: 'scatter',
    events: {
        selection: function(event) {
            for (var i = 0; i < this.series[0].data.length; i++) {
                var point = this.series[0].data[i];
                if (point.x > event.xAxis[0].min &&
                    point.x < event.xAxis[0].max &&
                    point.y > event.yAxis[0].min &&
                    point.y < event.yAxis[0].max) {
                        point.select(true, true);
                    }

            }
            return false;
        }
    },
    zoomType: 'xy'
},
plotOptions: {
    series: {
        allowPointSelect: true,
        point: {
            events: {
                'select': function(event){
                    alert("point selected!");
                }
            }
        }
    }
}

http://jsfiddle.net/u18xkger/

我在highcharts论坛上发现了这篇文章，但我无法创建所需的行为。 http://forum.highcharts.com/highcharts-usage/drag-selection-around-multiple-points-t31553/#p110834

提前感谢任何帮助。

Answer 1

我通过highcharts人员提供的帮助解决了这个问题，当选择完成后调用自定义事件。

 function toast(chart, text) {
    chart.toast = chart.renderer.label(text, 100, 120)
        .attr({
            fill: Highcharts.getOptions().colors[0],
            padding: 10,
            r: 5,
            zIndex: 8
        })
        .css({
            color: '#FFFFFF'
        })
        .add();

    setTimeout(function () {
        chart.toast.fadeOut();
    }, 2000);
    setTimeout(function () {
        chart.toast = chart.toast.destroy();
    }, 2500);
}

/**
 * Custom selection handler that selects points and cancels the default zoom behaviour
 */
function selectPointsByDrag(e) {

    // Select points
    Highcharts.each(this.series, function (series) {
        Highcharts.each(series.points, function (point) {
            if (point.x >= e.xAxis[0].min && point.x <= e.xAxis[0].max &&
                    point.y >= e.yAxis[0].min && point.y <= e.yAxis[0].max) {
                point.select(true, true);
            }
        });
    });

    // Fire a custom event
    HighchartsAdapter.fireEvent(this, 'selectedpoints', { points: this.getSelectedPoints() });

    return false; // Don't zoom
}

/**
 * The handler for a custom event, fired from selection event
 */
function selectedPoints(e) {
    // Show a label
    toast(this, '<b>' + e.points.length + ' points selected.</b>' +
        '<br>Click on empty space to deselect.');
}

/**
 * On click, unselect all points
 */
function unselectByClick() {
    var points = this.getSelectedPoints();
    if (points.length > 0) {
        Highcharts.each(points, function (point) {
            point.select(false);
        });
    }
}

chart: {
        type: 'scatter',
        events: {
            selection: selectPointsByDrag,
            selectedpoints: selectedPoints,
            click: unselectByClick
        },
        zoomType: 'xy'
    }

以下是参考链接： https://github.com/highslide-software/highcharts.com/issues/4682

highcharts一次选择多个点

1 个答案: