Проблема события щелчка трехмерной кольцевой диаграммы на краях диаграммы - PullRequest
Новая
       31

Проблема события щелчка трехмерной кольцевой диаграммы на краях диаграммы

0 голосов
/ 06 сентября 2018

У меня есть 3d кольцевая диаграмма, на которой я хочу щелкнуть (где угодно на диаграмме на поверхности, а также на краю диаграммы) на одном срезе пончика и перенаправить на другой URl.

  1. Это работает, если я щелкаю по поверхности диаграммы или сначала наводю курсор на поверхность, а затем нажимаю на край диаграммы.

  2. Событие щелчка и всплывающая подсказка не будут работать, если я наведу курсор мыши прямо на край трехмерной диаграммы пончиков и нажму. И всплывающая подсказка, и событие щелчка не работают.

Есть ли какое-либо решение, если я хочу щелкнуть где-нибудь на трехмерной кольцевой диаграмме без среза диаграммы состояния (сначала наведите курсор на поверхность, а затем на край) и выполнить какое-либо действие.

Может кто-нибудь мне помочь?

** Обновлено **

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

нажмите на 3d тень без наведения на поверхность, нажмите событие событие doent.

1 Ответ

0 голосов
/ 09 сентября 2018

Если я понял ваш вопрос, вы хотите событие клика по всей области графика.

Затем необходимо добавить событие в блок 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>
...