highcharts - 3D 圆环图点击图表边缘的事件问题

Question

我有 3d donut chart 表，在该图表中，我想在一片 donut 上单击(图表表面以及图表边缘的任何位置)并重定向到另一个 URl。

如果我单击图表的表面或首先将鼠标悬停在表面上然后单击图表的边缘，它的工作原理。

如果我直接将鼠标悬停在 3d 圆环图的边缘并单击，则单击事件和工具提示不起作用。工具提示和点击事件都不起作用。

如果我想无条件单击 3d 圆环图上的任意位置(首先悬停到表面然后悬停在边缘)图表切片并执行一些操作，是否有任何解决方案。

有人可以帮助我吗？

**更新 **

Jsffidle:: https://jsfiddle.net/176anruf/12/

单击 3d 阴影而不将鼠标悬停在表面上，单击事件不起作用。

Answer 1

如果我理解您的问题，您希望在整个图表区域上单击事件。

那么事件需要添加到chart堵塞:

chart: {
 events: {
    click: function(event) {
      alert(' clicked\n' +
        'Alt: ' + event.altKey + '\n' +
        'Control: ' + event.ctrlKey + '\n' +
        'Meta: ' + event.metaKey + '\n' +
        'Shift: ' + event.shiftKey
      );
    }
  }
};

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45
    },
    events: {
        click: function(event) {
          alert(' clicked\n' +
            'Alt: ' + event.altKey + '\n' +
            'Control: ' + event.ctrlKey + '\n' +
            'Meta: ' + event.metaKey + '\n' +
            'Shift: ' + event.shiftKey
          );
        }
      }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 100,
      depth: 50,
      point: {
        events: {
          click: function() {
            alert("clicked");
          }
        }

      }
    },
  },
  series: [{
    allowPointSelect: true,
    name: 'Delivered amount',
    data: [
      ['Bananas', 8],
      ['Kiwi', 3],
      ['Mixed nuts', 1],
      ['Oranges', 6],
      ['Apples', 8],
      ['Pears', 4],
      ['Clementines', 4],
      ['Reddish (bag)', 1],
      ['Grapes (bunch)', 1]
    ],
    point: {
      events: {
        click: function(event) {
          alert(this.x + " " + this.y);
        }
      }
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px"></div>