面積圖上的高度圖鑽取

在堆積面積圖上使用鑽取時，根據最接近鼠標的系列而不是基於點擊的面積觸發事件。有沒有辦法改變這種行爲？面積圖上的高度圖鑽取

換句話說，我是否可以製作所有藍色區域觸發器系列1的向下鑽取和全部綠色觸發器系列2的向下鑽取？

$(function() { 
 
    series1 = [1, 4, 9, 16, 25, 36, 49, 64].map(point => ({ 
 
     y: point, 
 
     drilldown: true, 
 
    })) 
 
    series2 = [1, 2, 3, 4, 5, 6, 7, 8].map(point => ({ 
 
     y: point, 
 
     drilldown: true, 
 
    })) 
 

 
    $('#container').highcharts({ 
 
     chart: { 
 
      events: { 
 
       drilldown: (e) => console.log(e.point.series.name) 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      area: { 
 
       stacking: 'normal', 
 
       trackByArea: true 
 
      } 
 
     }, 
 
     tooltip: { 
 
      shared: true 
 
     }, 
 
     series: [{ 
 
      data: series1, 
 
      type: 'area', 
 
      color: 'blue' 
 
     }, { 
 
      data: series2, 
 
      type: 'area', 
 
      color: 'green' 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

來源

2016-07-22 user3080953

我想這可能是小Highcharts錯誤，它應該當您使用trackByArea觸發正確的區域：真。如果你認爲相同，你可以在Highcharts github上報告這個問題：https：//github.com/highcharts/highcharts/issues –

@GrzegorzBlachliński好的，謝謝，會做 – user3080953

解決方法爲Highcharts 4.2：

的原始事件實際上已經對SVG的某個元素的引用，所以我們可以使用它來代替傳遞到鑽取事件功能。

需要lodash和jQuery：

drilldown: function(e) { 
    index = _.findIndex(this.series, (series) => 
    $(e.originalEvent.path[1]).children().is((series.area || {}).element) 
) 
    console.log(this.series[index].name) 
}

來源

2016-07-26 18:06:49 user3080953

面積圖上的高度圖鑽取

回答

相關問題