HighCharts多點選擇 - 在點選擇後立即訪問/更新getSelectedPoints數組

Question

我有一個HighCharts線圖，允許多點選擇。在每次選擇/取消選擇後，我想根據當前選定的所有點執行操作。

我觸發了plotoptions.line.point.events.select（或.click）事件，它返回所選的最新點。但是，chart.getSelectedPoints（）返回的數組顯然不會在.select或.click事件完成之後纔會更新。所以我不能在裏面使用chart.getSelectedPoints（）這個事件。

下面是從這個例子表明該問題的exerpt - 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

您可以使用選定的點創建數組，只需按/覆蓋裏面的點。演示：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] 
    }] 
}); 

Answer 2

如果選擇chart.getSelectedPoints()回報所有其他分和select回調this是剛剛選定的一點，爲什麼不將它們結合起來，以獲得所有被選中的點？

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。