Question

我有3d甜甜圈图，在该图中，我想单击（在表面上以及图表边缘的图表上的任何位置）一片甜甜圈，然后重定向到另一个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>

图表边缘上的3D甜甜圈图表单击事件问题

1 个答案: