面积图上的高度图钻取

在堆积面积图上使用钻取时，根据最接近鼠标的系列而不是基于点击的面积触发事件。有没有办法改变这种行为？面积图上的高度图钻取

换句话说，我是否可以制作所有蓝色区域触发器系列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

面积图上的高度图钻取

回答

相关问题