2015-10-25 4 views
-1

Я хочу реализовать выбор нескольких точек в Highcharts, я уже сделал этот образец скрипта моего прогресса, но кажется, что с моим событием select кода вызывается несколько раз в зависимости от того, сколько очков вы выбрали. Возможно ли получить все выбранные точки за один раз и вызвать событие select только один раз?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

Любая помощь приветствуется, спасибо заранее.

+0

К сожалению, выберите событие предназначено для marticular точки, са вызывается для каждой точки с выбранной области. Вы можете только поймать событие выбора (например, у вас есть), а затем вызвать пользовательское действие после цикла FOR. –

+2

Позволяет сказать, что событие «выбрать» было вызвано только один раз, что бы вы сделали с ним? Не могли бы вы просто сделать то, что хотите в другом месте? Какая информация будет содержать одно событие выбора, которое было бы значимым? Он будет содержать информацию только одного выбранного пункта. –

ответ

1

Я решил его решить с помощью предоставленных парнями высоких карт, вызвав пользовательское событие, когда выбор завершился.

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

Смежные вопросы