Question

在堆积区域图表上使用向下钻取时，将根据最靠近鼠标的系列触发事件，而不是基于单击的区域。有没有办法改变这种行为？

换句话说，我可以制作所有蓝色区域触发系列1的向下钻取和所有绿色触发系列2的深入演练吗？

＆＃13;

$(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'
        }]
    });
});

＆＃13;

<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>

＆＃13;

Answer 1

Highcharts 4.2的解决方法：

原始事件实际上具有SVG的某个元素的引用，因此我们可以使用它而不是传递给drilldown函数的事件。

需要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)
}

面积图上的Highcharts明细

1 个答案: