highcharts一次選擇多個點

-1

我想在Highcharts中實現多個點選擇，我已經對此進行了一些示例，但是看起來我的代碼選擇事件被多次調用，具體取決於多少個點你有選擇嗎？是否有可能一次性獲得所有選定的點並只調用一次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

任何幫助表示讚賞，在此先感謝。

來源

2015-10-25 arsinawaz

不幸的是選擇事件被指派用於marticular點，SA被調用與選定的區域中的每個點。你只能捕獲選擇事件（就像你有），然後在FOR循環之後調用自定義動作。 –

可以說，「選擇」事件只被調用一次，你會用它做什麼？你能不能在別處做任何你想做的事情？單個選擇事件提供哪些信息會有意義？它只包含一個選定點的信息。 –

當選擇完成後，我通過調用自定義事件來解決高幫傢伙提供的幫助。

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

來源

2015-10-28 09:27:20 arsinawaz

highcharts一次選擇多個點

回答

相關問題